Триггерная анимация CSS только если кнопка не была нажата

Question

В следующем коде на .hover() высота элемента #wrap в анимированном виде через jQuery animate().

На handlerIn элемент получает 250px высоты и на handlerOut он теряет 250px высоты.

Проблема в том, что я также включил кнопку, которая дает пользователю возможность удалить 250 пикселей высоты, которая добавляется на .hover(handlerIn). Когда пользователь нажимает эту «кнопку», затем перемещает мышь за пределы элемента hover (handlerOut); элемент hover теряет 250px дважды.

Я бы хотел только активировать функцию .hover(handlerOut), если у пользователя есть нет нажмите кнопку «.

Fiddle

$(document).ready(function() { 
    $("#wrap").hover(
    function() { 
     $(this).animate({height: '+=250'}, 'slow'); 
     $('#button').css('display', 'block'); 
     expanded = true; 
     console.log("expanded is " + expanded); 
    }, 
    function() { 
     $(this).animate({height: '-=250px'}, 'slow'); 
     $("#button").hide(); 
     expanded = false; 
     console.log("expanded is " + expanded); 
    } 
); 
    $('#wrap').on('click', function(){ 
    window.open('http://google.com', 'click', 'window settings'); 
    return false; 
    console.log('click'); 
    }); 
    if(expanded = true){ 
    $("#button").on('click', function(){ 
     $('#wrap').animate({height: '-=250px'}, 'slow'); 
     $("#button").hide(); 
     return false; 
     }); 
    }; 

}); 

Answer 1

(Хотя я не всегда думаю, что вы собираетесь об этом правильном пути) Вы должны убедиться, что вы настраиваете расширены ложь после нажатия X, т.е. сообщая код, что коробка больше не расширена и что она не должна уменьшать размер коробки далее:

$(document).ready(function() { 
    $("#wrap").hover(
    function() { 
     $(this).animate({height: '+=250'}, 'slow'); 
     $('#button').css('display', 'block'); 
     expanded = true; 
     console.log("expanded is " + expanded); 
    }, 
    function() { 
     $(this).animate({height: '-=250px'}, 'slow'); 
     $("#button").hide(); 
     expanded = false; 
     console.log("expanded is " + expanded); 
    } 
); 
    $('#wrap').on('click', function(){ 
    window.open('http://google.com', 'click', 'window settings'); 
    return false; 
    console.log('click'); 
    }); 
    if(expanded = true){ 
    $("#button").on('click', function(){ 
     $('#wrap').animate({height: '-=250px'}, 'slow'); 
     $("#button").hide(); 
     return expanded = false; //This is all I changed 
     }); 
    }; 

}); 

Это работает. Fiddle

EDIT

Слово предупреждения - вы действительно должны дважды подумать, прежде чем использовать функцию jQuery.animate(). По сравнению, скажем, что-то вроде анимации CSS или далекой лучшей js-анимационной платформой, такой как GSAP, функция jQuery.animate() составляет около 10x slower :: reference.

Лично я бы использовал GSAP, но в любом случае вы не должны тратить гораздо больше времени на изучение этого рабочего процесса - это только помешает вам в будущем!