简单的jquery幻灯片元素答案

【问题标题】：Simple jquery slide element简单的jquery幻灯片元素
【发布时间】：2014-07-07 21:59:24
【问题描述】：

我是 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)
}

【问题讨论】：

老版本的jQuery有什么原因吗？此外，.hover() 通常需要两个函数。
您使用hover而不是click事件的任何原因？
这是一个用 jQuery 和 CSS 改变大小的小提琴 - 如果你愿意的话，你可以用 CSS 更慢地转换大小 - jsfiddle.net/JJh9z/1780

标签： javascript jquery css height

【解决方案1】：

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

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

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

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

});

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

【讨论】：

这个版本可能有问题，因为#ruch 从鼠标下方移动并激活mouseleave/mouseout。
如果它对你有用，你可以投票/选择正确答案吗？谢谢

【解决方案2】：

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

您可以指定一个handleout 事件处理程序，您可以在其中将元素恢复到之前的高度。您还应该选择不是“HOVER” div（它很小），而是选择一个更大的元素（如 cont）：

$('#cont').hover(

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

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

在这里，我指定了一个悬停处理程序，并专注于“cont”而不是“ruch”

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

【讨论】：

但是对我来说，在我更大的 div 中获得 HOVER（例如）作为悬停元素很重要，因为它将是 jpg 元素，而#cont 的背景将重复-y
对不起，我忘了更新小提琴link。如您所见，如果将事件处理程序应用于“HOVER”，则当 div 移动时，鼠标将位于悬停 div 之外。由你决定如何设置它..

【解决方案3】：

有几种方法可以做到这一点。一种是调用“动画完成后功能”。它采用另一个函数作为选项。下面的示例在将高度设置为 300 像素后会发出警报“Hii”。

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

【讨论】：

【解决方案4】：

为了防止一个悬停事件出现多个动画，因为#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，如上所述。

【讨论】：

【解决方案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;
});

【讨论】：