如何使用jQuery在mouseenter和mouseleave上淡出2個圖像？

我有一個自定義按鈕（下面的代碼）。我希望它：如何使用jQuery在mouseenter和mouseleave上淡出2個圖像？

上mouseenter很快360旋轉的mouseenter快（目前工作的罰款）
褪色較暗的圖像（也是目前工作的罰款）上mouseleave
NOT非旋轉（當前工作精）

我還不能弄清楚如何：

發德回原始圖像mouseleave（尚未工作）

我已經試過jQuery的這麼多的變化，包括.hover，.fadeToggle，fadeIn，fadeOut以及animate，但沒有一個似乎爲我工作。

我錯過了一些非常簡單明顯的東西嗎？

注意：我剛剛在此處使用Apple徽標進行演示。如果我可以通過mouseleave工作，我可以將其轉移到我的現實生活中。

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

找到它。

試圖在完全相同的元素上管理兩個轉換使其變得太複雜。

我最終不得不添加一個類到img元素和另一個到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

在這裏，當你鼠標進入'不透明度：0.7'，然後旋轉'不透明度：1.0'後。所以？ –

不透明度需要**逐漸**。以上變爲不透明：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

我需要關聯的jQuery，因爲我不希望它在'mouseleave'上取消旋轉。 – KingDesigns

@KingDesigns哦，好的..我以爲你*想讓它在鼠標離開時旋轉。檢查更新後的代碼片段...現在不會旋轉，但不透明度將回到100％.....並且仍然不需要額外的jQuery。 – Scott

對不起，我應該指定確切的情況。這是我正在建立的'回頂部'。每次**鼠標進入時，它必須旋轉360 ** **。我有一個稍微較暗的圖像，它在同一時間必須淡出**回到** mouseleave上的原始圖像（無需旋轉整個div）。因此，併發症。 @Scott – KingDesigns

如何使用jQuery在mouseenter和mouseleave上淡出2個圖像？

回答

相關問題