0

私は学生プロジェクトに取り組んでおり、私は新しいjqueryです。プロジェクトでは、jqueryを使用していくつかの機能を強化する必要があり、基本的なタスクを実行するために多くのことを学びましたが、非常に混乱しています。

私のスクリプトの 1 つは、マウス オーバー機能で実際に div コンテナーのイメージを変更します。機能は現在問題ありませんが、少し美しく感じさせます。フェードイン フェードアウト機能またはアニメーションを介してトランジション効果を追加したいのですが、機能しません。両方でそれを出します。私はインターネットで検索しましたが、ここではそれらの例をここで心に関連付けることができません.

トランジション効果を与えるために、このコードのどこにフェードインフェードアウトまたはアニメーション機能を挿入できるかを知りたいだけです。

$(document).ready(function () {
$(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).attr("alt", $(this).attr("src"));
    $(this).attr("src", dummyImg);
}, function () {
    var dummyImg = $(this).attr("src");
    $(this).attr("src", $(this).attr("alt"));
    $(this).attr("alt", dummyImg);
});
});

ありがとうございました！

4

4 に答える 4

3

フェードインおよびフェードアウト関数のコールバック関数にアクセスしたい場合、これにより、src 画像に変更を加えることができます。それはこのようになります - >

$(document).ready(function () {
  $(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("alt", $(this).attr("src"));
      $(this).attr("src", dummyImg);
      $(this).fadeIn('slow');
    });
  }, function () {
    var dummyImg = $(this).attr("src");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("src", $(this).attr("alt"));
      $(this).attr("alt", dummyImg);
      $(this).fadeIn('slow');   
    });
  });
});
于 2012-07-29T23:01:19.863 に答える
1

メイヴン、

CSS Webkit の使用を考えたことはありますか? この SO 記事では、さまざまなレートでのクロスフェード画像について詳しく説明します。CSS Webkit Transition - フェードインよりゆっくりフェードアウト

基本的なイベントを使用して、画像をフェードイン/フェードアウトすることもできます。この JQuery/JSFiddle SO 記事では、this参照オブジェクトを使用しています: Jquery fadeOut on hover

JSFiddle.net ドキュメントの基本的なフェードイン/フェードアウト構造は次のとおりです。

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

~JOL

于 2012-07-29T22:54:49.493 に答える
1

個人的には、2 つの画像 (css) をレイヤー化して、ホバーなしのバージョンが通常一番上になるようにします。次に、ホバー関数で $(this).fadeOut('fast') を追加して、下にある画像が表示されるようにします。

于 2012-07-29T22:57:22.337 に答える
1

http://jsfiddle.net/Xm2Be/13/それを行う方法の例があります。もちろん、括弧内に数値を配置することで、フェード効果の長さを設定できます。たとえば、.fadeToggle(5000) のタイミングは 5 秒です。

于 2012-07-29T23:03:03.067 に答える