0

私は、fadeTo を使用して 1 つの特定の 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

クラス名のディディエの良いキャッチに基づいて構築すると、 hover() スクリプトに問題があります。hover() は、引数として 1 つまたは 2 つの関数を取ることができます。1 つだけを指定すると、mouseover と mouseout の両方で実行されます。あなたはこれが欲しいと思うでしょう：

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

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

これは、mousein で .spark をフェードインし、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. マウス入力で不透明度を 1 にフェードする 4. マウスリーブで不透明度を 0 にフェードする

于 2012-02-27T15:37:06.347 に答える