Question

我有一小段Jquery代码：

$(document).ready(function(){
    //Caption Sliding (Partially Hidden to Visible)
    $('.boxgrid.caption').hover(function(){
        $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'120px'},{queue:false,duration:160});
    });
});

它可以工作但是在悬停时，不透明的部分出现在鼠标上的图片上它会下降，但我得到：

$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});

这必须是在没有徘徊的时候怎么样？

Answer 1

除非我误解了这个问题，否则只需在你的css中设置初始样式：

.boxgrid.caption .cover{
    top: 90px;
}

并在悬停中交换代码。

    $(document).ready(function(){
        $('.boxgrid.caption').hover(function(){
            $(".cover", this).stop().animate({top:'120px'},{queue:false,duration:160});
        }, function() {
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
        });
    });

Answer 2

当你将鼠标悬停时设置为90px时，鼠标熄灭时设置为120px。从你的描述中听起来你想要反过来所以只需交换两个数字。

当你问如何使90px成为“正常”状态时，你的意思是什么时候它还没有被鼠标触及？如果是这样，请在悬停处理程序之前或之后将此行添加到您的文档中：

$(".cover", this).css({top:'90px'});

全部放在一起：

    $(document).ready(function(){
        $(".cover", this).css({top:'90px'});

        //Caption Sliding (Partially Hidden to Visible)
        $('.boxgrid.caption').hover(function(){
            $(".cover", this).stop().animate({top:'120px'},{queue:false,duration:160});
        }, function() {
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
        });
    });

这假设您必须出于某种原因在JavaScript中完成所有操作，并且不能仅使用

在样式表中设置默认状态

.boxgrid.caption .cover { top : 90px; }

Jquery，不是在悬停但总是？

2 个答案: