<script type="text/javascript">
if (screen.width == 1280) {
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter', function() {
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width': '100%',
'height': '170px',
'left': '0px'
}, 400, 'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({ 'top': '250px' }, 500, 'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({ 'height': '170px' }, 300, function() {
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length) {
var left = '250px';
if ($elem.parent().children().length == $elem.index() + 1)
left = '-250px';
$sub_menu.show().animate({ 'left': left }, 200);
}
});
}).bind('mouseleave', function() {
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length)
$sub_menu.hide().css('left', '0px');
$elem.find('.sdt_active')
.stop(true)
.animate({ 'height': '0px' }, 300)
.andSelf().find('img')
.stop(true)
.animate({
'width': '0px',
'height': '0px',
'left': '150px'
}, 400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.css('color', 'red')
.animate({ 'top': '100px' }, 500);
});
});
}
else if (screen.width == 1600) {
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter', function() {
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width': '80%',
'height': '170px',
'left': '0px'
}, 400, 'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({ 'top': '250px' }, 500, 'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({ 'height': '170px' }, 300, function() {
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length) {
var left = '250px';
if ($elem.parent().children().length == $elem.index() + 1)
left = '-250px';
$sub_menu.show().animate({ 'left': left }, 200);
}
});
}).bind('mouseleave', function() {
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length)
$sub_menu.hide().css('left', '0px');
$elem.find('.sdt_active')
.stop(true)
.animate({ 'height': '0px' }, 300)
.andSelf().find('img')
.stop(true)
.animate({
'width': '0px',
'height': '0px',
'left': '150px'
}, 400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.css('color', 'red')
.animate({ 'top': '100px' }, 500);
});
});
}
else if (screen.width <= 1920) {
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter', function() {
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width': '60%',
'height': '170px',
'left': '0px'
}, 400, 'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({ 'top': '250px' }, 500, 'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({ 'height': '170px' }, 300, function() {
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length) {
var left = '250px';
if ($elem.parent().children().length == $elem.index() + 1)
left = '-250px';
$sub_menu.show().animate({ 'left': left }, 200);
}
});
}).bind('mouseleave', function() {
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length)
$sub_menu.hide().css('left', '0px');
$elem.find('.sdt_active')
.stop(true)
.animate({ 'height': '0px' }, 300)
.andSelf().find('img')
.stop(true)
.animate({
'width': '0px',
'height': '0px',
'left': '150px'
}, 400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.css('color', 'red')
.animate({ 'top': '100px' }, 500);
});
});
}
</script>
Javascript использует все время 3 условие
У меня три условия и каждый раз когда я запускаю у меня работает только последние условие. Вроде как все правильно. Когда оставляю 2 условия javavascript работает, нормально для каждого из двух расширения.
Код:
Всё правильно, оно и выполняется, потому что во всех трёх случаях оно - единственно верное условие.
Таким образом, следует уточнить:
Таким образом, следует уточнить:
Код:
if(screen.width >= 1200 && screen.width < 1600){
.........................
}else if(screen.width >= 1600 && screen.width < 1920){
.........................
}else if(screen.width > 1600 && screen.width < 1920){
.........................
}
.........................
}else if(screen.width >= 1600 && screen.width < 1920){
.........................
}else if(screen.width > 1600 && screen.width < 1920){
.........................
}