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（）方法时，队列中尚未执行的所有函数都将从队列中删除

updated fiddle

Answer 2

将$(this).clearQueue()添加到hover个函数中（就在CSS修改之后）。

顺便说一下：您可以通过将CSS规则放在一个$(this).css()中来减少代码 - 这样的规则：

 $(this).css({

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

 });

Answer 3

请添加此

 $(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 4

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

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

Answer 5

使用此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/

鼠标悬停时增加div的大小

5 个答案: