Question

我在js和jq中全新。我正在尝试强制我的#cont div在悬停动画时改变高度并回到之前的高度而不悬停，但我不知道如何实现这一点。在我的测试中，它应该发出警报（或做出其他功能），对吧？

<div id='cont'>
    <ul>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
    </ul>
    <div id='ruch'>HOVER</div>
</div>

#cont {
    border: 1px solid #000;
    height: 200px;
    overflow:hidden;
    position:relative;
}

#ruch {
    position:absolute;
    bottom:0px;
}

var result = $("#cont").height();

$('#ruch').hover(function(){
    $('#cont').animate({height:'300px'}, 500);
});

if (result == 300) {
    alert(result)
}

Answer 1

您的if语句仅在首次加载脚本时运行一次，因此每次有人悬停时都不会发出警报。它不是一个事件监听器。

当鼠标离开元素时（mouseout），您需要添加另一个事件侦听器。请参阅此修改后的代码：

$('#ruch').hover(function(){
    $('#cont').animate({height:'300px'}, 500);
});

$('#ruch').mouseout(function(){
    $('#cont').animate({height:'200px'}, 500);

});

http://jsfiddle.net/JJh9z/1775/

Answer 2

http://api.jquery.com/hover/

您可以指定一个handleout事件处理程序，在该处理程序中，您可以将元素恢复到之前的高度。你也不应该选择＆＃39; HOVER＆＃39; div（它很小）但是更大的元素（如续）：

$('#cont').hover(

function () {
    $('#cont').animate({
        height: '300px'
    }, 500);
},

function () {
    $('#cont').animate({
        height: '200px'
    }, 500);
});

在这里，我已经指定了一个悬停处理程序，并专注于＆＃39; cont＆＃39;而不是＆＃39; ruch＆＃39;

http://jsfiddle.net/JJh9z/1773/

Answer 3

要防止一个悬停事件的多个动画，因为在悬停动画期间#ruch从鼠标指针下方移动，请使用以下版本和当前版本的jQuery：

var result = $("#cont").height();

$('#ruch').on( 'mouseenter', function(){
    $('#cont').animate({height:'300px'}, 500, function() {
       alert( result );
    });
});

$('#cont').on( 'mouseleave', function(){
    if( $(this).height() != result ) {
       $(this).animate({height:result}, 500);
    }
});

#cont扩展后，鼠标不再超过#ruch，任何轻微的移动都会触发mouseleave，#cont会崩溃。为防止这种情况，请将mouseleave事件附加到#cont，如上所述。

Answer 4

有几种方法可以做到这一点。一种是调用'动画完成后的功能'。它将另一个函数作为选项..以下示例在将高度设置为300px后警告'Hii'。

$( "#ruch").hover(function() {
  $( "#cont" ).animate({
    height: "300px"
  }, {
    duration: 500,
    complete: function() {
      alert('Hii');
    }
  });
});

Answer 5

你也可以玩一些webkit过渡，这很容易。

当鼠标离开偶数并排队动画时添加事件监听器的问题是，如果你疯狂地将鼠标移动到div上，你最终可能会得到许多动画的队列，而这种方法只会做一个动画。

#cont {
    border: 1px solid #000;
    height: 200px;
    overflow:hidden;
    position:relative;
    -webkit-transition: 0.5s;
}

#ruch {
    position:absolute;
    bottom:0px;
}

$(document).on('mouseover', '#cont', function() {
    document.getElementById('cont').style.height = 300;
});

$(document).on('mouseleave', '#cont', function() {
   document.getElementById('cont').style.height = 200;
});

简单的jquery幻灯片元素

5 个答案: