0

我想使用fadeTo 显示一个特定的div。如果我将鼠标悬停在 div1 上，则 spark1 应该可见并在鼠标移出时消失。

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

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);
            });

还是不会触发，没看懂。。

4

5 回答 5

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/

于 2012-02-27T15:28:28.667 回答
0

如果您使用正确的 css 类名称，您的代码就可以工作

演示

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

于 2012-02-27T15:24:17.070 回答
0

您在悬停功能中犯了一个错误。它有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/

于 2012-02-27T15:28:40.687 回答
0

基于 Didier 对类名的把握，您的 hover() 脚本存在问题。hover() 可以接受一个或两个函数作为参数 - 如果你只提供一个，它会在 mouseover 和 mouseout 上执行。你会想要这个，我想：

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

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

这会使 .spark 在 mousein 上淡入并在 mouseout 上淡出。如果您只想在鼠标悬停时制作动画，我会从 .hover() 切换到 .mouseout()。

于 2012-02-27T15:29:25.947 回答
0

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

于 2012-02-27T15:37:06.347 回答