0

フェード インとフェード アウト エフェクトを適切に機能させるのに苦労しています。私はそれを複雑にしすぎていると思います。

私は4つの画像を持っていますが、最初の2つだけがフェードアウトし、画像にカーソルを合わせる必要があります(他の2つの画像はページ上の他の機能で機能します)。

私のHTMLは：

<div class="square">
    <div class="imageHolder">    
        <!--Comment out and uncomment BG image to show transitions on BG images-->    
        <img class="one" src="image_01.jpg" />
        <img class="two" src="image_02.jpg" />
        <img class="three" src="image_03.jpg" />
        <img class="four" src="image_04.jpg" />
    </div>
</div>

画像、2、3、4 表示なし

JS:

$('.square').mouseover(function () {
            $(this).find('img').each(function () {
                if ($(this).attr('class') === 'two') {
                    $(this).fadeIn('slow');
                }
                if ($(this).attr('class') === 'one') {
                    $(this).fadeOut('slow');
                }
            });
    });

どんな助けでも大歓迎です。

回答ありがとうございます。

私はあまりにも賢くしようとしていたのですが、それは必要ありませんでした。プラグインを使わずにフェードインとフェードアウトを同時に行う方法はありますか?

4

6 に答える 6

1

次のようにしてみてください。

$(".one").fadeIn("slow", function() { $(this).fadeOut("slow") });
$(".two").fadeIn("slow", function() { $(this).fadeOut("slow") });

アップデート：

私はあなたの質問を読み違え、フェードインとフェードアウトの両方を望んでいると思いました。最初のフェードインと 2 番目のフェードアウトを行うには、次のようにします。

$(".one").fadeIn("slow");
$(".two").fadeOut("slow");

oneandクラスを持つ他の要素がありtwo、それらに影響を与えたくない場合は、$(".imageHolder .one")and$(".imageHolder .two")の代わりに$(".one")andを入力できます$(".two")。

ページに複数の要素がある場合は、 epascarelloまたはsushanth reddyで提案されている関数をimageHolder使用してください。find()

于 2012-10-02T17:27:39.867 に答える
1

それらを選択しただけでなく、なぜそれぞれを行うのですか?

var imgs = $(this).find("img");
imgs.filter(".one").fadeOut('slow');
imgs.filter(".two").fadeIn('slow');

また

var imgs = $(this);
imgs.find(".one").fadeOut('slow');
imgs.find(".two").fadeIn('slow');
于 2012-10-02T17:27:52.973 に答える
0

私はこれがあなたが探しているものだと思います：

  $('.square img')
    .mouseover(function () {
      $(this).fadeIn('slow');
    })
    .mouseout(function () {
      $(this).fadeOut('slow');
    });
于 2012-10-02T17:30:31.343 に答える
0

jquery.hoverIntent.jsを使用した方がよいと思います。カーソルをさまざまな画像上ですばやく移動すると、少し遅延時間が発生します。

例

$(document).ready(function(){
    var config = {    
     interval: 230,
     over: zoomIn,
     out: zoomOut  
    };

    $("div#clients_wrap div").hoverIntent(config);

    });

ZoomInとzoomOutは関数であり、それぞれフェードインとフェードアウトで宣言できます。これは単なる改善です。

于 2012-10-02T17:32:42.560 に答える
0

.each ループは必要ありません。div 内の img を見つけて操作を行うだけです。

代わりにこれを試してください..

$('.square').mouseover(function() {

    $(this).find('.two').fadeIn('slow');
    $(this).find('.one').fadeOut('slow');

});​

フィドルをチェック

于 2012-10-02T17:29:22.750 に答える
0

基本的に、ホバーイン/アウトでそれぞれフェードイン/アウトする必要がある画像のグループにクラスを割り当てます

<div class="square">
        <div class="imageHolder">    
            <!--Comment out and uncomment BG image to show transitions on BG images-->    
            <img class="one fadeeffect" src="image_01.jpg" />
            <img class="two fadeeffect" src="image_02.jpg" />
            <img class="three" src="image_03.jpg" />
            <img class="four" src="image_04.jpg" />
        </div>
    </div>

JavaScript:

$('.fadeeffect')..hover(function(){
    // write your code here
}
于 2012-10-02T17:36:14.340 に答える