mouseenterとmouseleaveでjQueryで2つの画像をフェードインするにはどうすればよいですか？

私はカスタムボタン（下のコード）を持っています。（現在作業mouseleaveに mouseenterとmouseleaveでjQueryで2つの画像をフェードインするにはどうすればよいですか？

-回転アンNOT（現在も正常に動作）mouseenter上の暗い画像に迅速に

（現在は正常に動作）mouseenterに素早く360回転

フェードを：私はそれをしたいです細かい）

どのように私はまだ把握することはできません。

FAデ・元の画像にmouseleave上

（はまだ動作していない）私は.hoverは、.fadeToggleは、fadeIn、fadeOutなどanimateが、どれも私のために働くように見えていないなど、jQueryののように多くのバリエーションを試してみました。

私は本当にシンプルで明白な何かを欠いていますか？

注：ここでは、デモンストレーションのためにAppleロゴを使用しました。私が「マウス・リーブ・オン・フェイ・バック・バック」を手に入れることができれば、私はそれを私の実際の生活状況に移すことができます。事前に

var thevalue = 1; 
 
$("div.main").mouseenter(function() { 
 

 
    thevalue = thevalue + 1; 
 
    if (thevalue % 2 == 0) { 
 
    $(this).addClass("myopacity"); 
 
    } else { 
 
    $(this).removeClass("myopacity"); 
 
    } 
 

 
    $(this).addClass("change").delay(500).queue(function() { 
 
    $(this).removeClass("change").dequeue(); 
 
    }); 
 
    
 
});

div.main { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
div.main img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.change { 
 
    -ms-transform: rotate(360deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(360deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(360deg); 
 
    transition-duration: .5s; 
 
} 
 
.myopacity { 
 
    opacity: 0.6; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="main"> 
 
    <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"> 
 
    </div> 
 

 
    <p id="dis"></p> 
 
</body> 
 

 
</html>

ありがとう！

出典

2016-09-21 KingDesigns

https://jsfiddle.net/adeneo/8wv71d3f/ – adeneo

見つかりました。

全く同じ要素の2つのトランジションを管理しようとすると、複雑すぎるという問題がありました。

1つのクラスをimg要素に追加する必要があり、もう1つをdiv要素に追加する必要がありました。 img要素はローテーションを管理し、div要素はシンプルなCSS :hover遷移によってフェードを管理します。

これは、jQueryをはるかに簡単にします。

$("div.main").mouseenter(function() { 
 
    
 
    $(".image").addClass("change").delay(500).queue(function() { 
 
    $(".image").removeClass("change").dequeue(); 
 
    }); 
 
    
 
}); 
 
// jQuery now much more simple. No need for variables or the if/else statement

div.main { 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-transition: all .5s ease-in; 
 
    -webkit-transition: all .5s ease-out; 
 
    -moz-transition: all .5s ease-in; 
 
    -moz-transition: all .5s ease-out; 
 
    -o-transition: all .5s ease-in; 
 
    -o-transition: all .5s ease-out; 
 
} 
 
/* This will take care of the fade transition on :hover */ 
 

 
div.main img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.change { 
 
    -ms-transform: rotate(360deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(360deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(360deg); 
 
    transition-duration: .5s; 
 
} 
 
/* .myopacity { 
 
    opacity: 0.6; 
 
} */ 
 
/* The .myopacity class is no longer necessary as it's taken care of through the div.main:hover class below */ 
 

 
div.main:hover, div.main:active, div.main:focus { 
 
    opacity: 0.6; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="main"> 
 
    <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" class="image"> 
 
    </div> 
 

 
    <p id="dis"></p> 
 
</body> 
 

 
</html>

種類の（元々期待したように）フェード移行のためのjQueryを使用していないとだまさが、これは同様に均等に動作します：

は、以下の更新されたコードを参照してください！

出典

2016-09-22 01:33:56 KingDesigns

これはあなたが欲しいものです。これがあなたに役立つことを願っています。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<style type="text/css"> 
 

 
div.main{ 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t 
 
} 
 

 
div.main img{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.change{ 
 
\t -ms-transform: rotate(360deg); /* IE 9 */ 
 
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(360deg); 
 
    transition-duration: 5s; 
 
} 
 

 

 
</style> 
 

 

 
<body> 
 

 
<div class="main"> 
 
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"> 
 
</div> 
 

 
<p id="dis"></p> 
 

 
<script type="text/javascript"> 
 

 
var thevalue = 1; 
 
$("div.main").mouseenter(function(){ 
 
\t $(this).addClass("change").fadeTo('fast',0.7).delay(5000).queue(function(){ 
 
\t \t $(this).removeClass("change").fadeTo('slow',1.0).dequeue(); 
 
\t }); 
 
\t 
 
}); 
 

 

 

 
</script> 
 

 

 

 

 
</body> 
 

 

 
</html>

出典

2016-09-21 04:12:20

ほぼ。不透明度を**標準に戻す**（不透明度：1）にフェードさせます。 @AnuradhS – KingDesigns

ここでは、 '' opacity：0.7'を ''マウスで入力すると、 '' opacity：1.0'の後に回転します。そう？ –

不透明度は**徐々に**にする必要があります。上記は 'opacity：1.0' **に即座に変更されています**。私は瞬時にすることはできません、それは徐々にする必要があります。 @AnuradhS – KingDesigns

私はこれが近いだと思う後...あなたが何であるかを100％確実ではないです。 360°と不透明度のディムを60％に回転し、0°に回転して完全に不透明にします。

不透明度クラスまたはそれに関連付けられたjQueryが必要な理由がわかりません。

$("div.main").hover( 
 
    function() { 
 
    $(this).addClass('change').addClass('myopacity'); 
 
    }, 
 
    function() { 
 
    $(this).removeClass('myopacity') 
 
    });

body { padding: 40px; } 
 

 
div.main { 
 
    width: 100px; 
 
    height: 100px; 
 
    opacity: 1; 
 
    transition: all .5s; 
 
    transition: all .5s; 
 
    background: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg) no-repeat center center; 
 
    background-size: cover; 
 
} 
 
div.main img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.main.change { 
 
    -ms-transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    transition: all .5s; 
 
    background: url(https://image.freepik.com/free-icon/windows-8-logo_318-40228.jpg) no-repeat center center; 
 
    background-size: cover; 
 
} 
 

 
.change.myopacity { 
 
    opacity: .6; }

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="main"> 
 
    </div> 
 

 
    <p id="dis"></p> 
 
</body> 
 

 
</html>

あなたは、実際のHTMLで画像をしたい場合は、映像ソースを変更するjQueryのホバー機能を使用することができます。

出典

2016-09-21 04:58:09 Scott

' mouseleave'で回転を止めたくないので、関連するjQueryが必要です。 – KingDesigns

@KingDesignsああ、大丈夫です。私はあなたがマウス休暇で戻って回転したかったと思いました。更新されたスニペットをチェックしてください...今は戻っていませんが、不透明度は100％に戻って.....さらに余分なjQueryは必要ありません。 – Scott

申し訳ありませんが、私は正確な状況を指定する必要があります。私が構築しているのは「トップトップ」です。マウスが入るたびに360°回転する必要があります** **。私はそれが同じ時間で消えていく少し暗いイメージを持っています。これは、mouseleaveの元のイメージに戻るように**戻します**（div全体を回転させずに）。したがって、合併症。 @Scott – KingDesigns

mouseenterとmouseleaveでjQueryで2つの画像をフェードインするにはどうすればよいですか？

答えて

関連する問題