jquery - 在鼠标悬停时增加 div 的大小

Question

当鼠标悬停在 div 上时，我想增加 div 的大小。
div 应该超过页面上所有准备好的其他 div。
当我在 div 上多次传递鼠标时，除了大​​小保持多次增加和减少外，所有工作都正常。

.news {
background-color: #ECEEF1;
border-bottom: 1px solid #C46211;
border-right: 1px solid #C46211;
color: #000000;
float: right;
height: 24px;
padding-right: 10px;
padding-top: 8px;
width: 600px;

}

我创建了一个小提琴http://jsfiddle.net/h4FcV/183/来展示这个例子。

Answer 1

你应该使用clearQueue() $(this).clearQueue();

当调用 .clearQueue() 方法时，队列上所有尚未执行的函数都从队列中移除

更新的小提琴

Answer 2

请添加这个

 $(function () {
        $("#div1").hover(
        function () {
            $(this).stop();
            $(this).animate({
                "width": "70%",
                "height": window.innerHeight + "px"
            });
            $(this).css("zindex","100");
            $(this).css("position","absolute");
            $(this).css("background-color","#efef3f");

        },

        function () {
            $(this).stop();
            $(this).animate({
                "width": "50%",
                "height": ""
            });
            $(this).css("zindex","1");
            $(this).css("position","relative");
             $(this).css("background-color","#fff");
        });
    });

请仅添加 $(this).stop(); 在应用效果 .animate() 之前。

它会为你工作。

谢谢。

Answer 3

添加$(this).clearQueue()到两个hover-functions （就在你的 CSS 修改之后）。

顺便说一句：您可以通过将 CSS 规则放在一个规则中来减少代码，$(this).css()如下所示：

 $(this).css({

    "property": "value",
    "property": "value"

 });

Answer 4

使用这个js：

$(function () {
    $("#div1").hover(

    function () {
        if($(this).css('height') === '100px') {
        $(this).animate({
            "width": "70%",
                "height": window.innerHeight + "px"
        });
        $(this).css("z-index", "100");
        $(this).css("position", "absolute");
        $(this).css("background-color", "#efef3f");
        }

    },

    function () {
        $(this).animate({
            "width": "50%",
                "height": ""
        });
        $(this).css("z-index", "1");
        $(this).css("position", "relative");
        $(this).css("background-color", "#fff");
    });
});

http://jsfiddle.net/Hive7/h4FcV/194/

Answer 5

您可以在 - 方法.stop()之前添加.animate({})。它使 jQuery 在开始新动画之前停止当前动画。

你可以在这个小提琴中看到它是如何工作的：http: //jsfiddle.net/h4FcV/188/