Question

我想用fadeTo显示一个特定的div。如果我将鼠标悬停在div1上，则应该可以看到spark1并在mouseout上消失..

但是当它悬停时它不会做任何事情，我不知道为什么。

HTML

<div class="spark1"></div>

<div class="div1">text</div>

CSS

.div1 {
    width:300px;
    height:300px;
}

.spark1 {
    position:absolute;
    width:27px;
    height:27px;
    margin-top:70px;
    margin-left:395px;
    background:url(../img/spark.png) no-repeat;
}

JS

$('.div1').hover(function(){
    $('.spark1').fadeTo(200, 0);
});

编辑（更新）

HTML

<div class="spark1"></div>
<div class="div1"></div>

CSS

.div1 {
width:300px;
height:300px;
background-color:#000000;
}

.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:0.0;
}

JS

            $('.project1').hover(function(){
                $('.spark1').fadeTo(200, 1);
            },
            function(){
                $('.spark1').fadeTo(200, 0);
            });

它仍然不会触发，我不明白..

Answer 1

如果事件在完成之前触发，则应stop the animation。试试这个

$('.div1').hover(function(){
    $('.spark').stop(true,true).fadeTo(200, 1);
},function(){
    $('.spark').stop(true,true).fadeTo(200, 0);
});

小提琴示例：http://jsfiddle.net/mK4m6/11/

Answer 2

如果使用正确的css类名称

，则代码可以正常工作

DEMO

您定义了一个css类.spark { }但在您的代码中使用了类名.spark1。
选择其中一个。

Answer 3

你的悬停功能出错了。它有2个回调方法：

$(document).ready( function() {
  $(".div1").hover(
      function(event) {
          //hover in
          $(".spark1").fadeTo(200,1);
      },
      function(event) {
          $(".spark1").fadeTo(200,0);
      });
});

下面是一个工作脚本：

http://jsfiddle.net/U8rzJ/7/

Answer 4

基于Didier对类名的好处，你的hover（）脚本存在问题。 hover（）可以将一个或两个函数作为参数 - 如果只提供一个函数，它将在mouseover和mouseout上执行。我想你会想要这个：

$('.div1').hover(function(){
    //fade in to 100%
    $('.spark').fadeTo(200, 100);
},
function(){

    $('.spark').fadeTo(200, 0);
});

这会消除鼠标中的.spark并在mouseout上淡出它。如果你只想在mouseout上做动画，我会从.hover（）切换到.mouseout（）。

Answer 5

HTML

<div class="spark1"></div>

<div class="div1">text</div>

CSS

.div1 {
width:300px;
height:300px;
}

.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:.0;
}

的jQuery

$('.div1').hover(function(){
    $('.spark1').fadeTo(200, 1);
},
function(){
    $('.spark1').fadeTo(200, 0);
});

然后一切顺利。 1.使用正确的类名 2.将spark1的初始不透明度设置为0 3.在mouseenter上将不透明度淡化为1 4.在mouseleave上将不透明度淡化为0

div hover上的Jquery不透明度不起作用

5 个答案: