mouseenter와 mouseleave에서 jQuery로 2 개의 이미지를 어떻게 페이드합니까?

사용자 정의 버튼이 있습니다 (아래 코드). mouseenter와 mouseleave에서 jQuery로 2 개의 이미지를 어떻게 페이드합니까?

현재 작업 (mouseleave에-않은 회전 NOT (또한 현재 잘 작동) mouseenter에 어두운 이미지에 신속하게

페이드 (현재 잘 작동)

빠르게 360 mouseenter에 회전 : 나는 그것을 원하는
- FA :
나는 아직 방법을 알아낼 수 없습니다) 잘 드 원래의 이미지로 다시 mouseleave에

(아직 작동하지 않습니다) 나는 .hover이 .fadeToggle는 fadeIn, fadeOut뿐만 아니라 animate 그러나 아무도 나를 위해 일하는 것 같았다 없었다 포함 jQuery를 너무 많은 변화를 시도했다.

나는 정말 간단하고 분명한 것을 놓치고 있습니까?

참고 : 여기에서 데모 용으로 Apple 로고를 사용했습니다. 'mouseleave on fade back'을 얻을 수 있다면 나는 그것을 실제 상황으로 옮길 수 있습니다. 사전에

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가 훨씬 간단 해집니다.

코드 아래에 업데이트 참조 :하지만이 똑같이 잘 작동 페이드 전환을 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>

종류 (원래 희망으로)!

출처

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'을'mouse enter'했을 때,'opacity : 1.0'가 뒤따른 것입니다. 그래서? –

불투명도는 ** 점진적 **이어야합니다. 위의 내용이'opacity : 1.0' **으로 바로 바뀌고 있습니다 **. 나는 순식간 아닐 수있다. 점진적이어야한다. @AnuradhS – KingDesigns

는 나는이 가까이 생각 ... 당신이 후에 무엇인지 100 % 확신합니다. 360 ° 및 불투명도 흐림을 60 %로 회전 한 다음 다시 0 °로 회전하고 전체 불투명도를 유지합니다.

불투명도 클래스 또는 관련 jQuery가 필요한 이유를 모르겠습니다.

당신이 실제 HTML에 이미지를 원하는 경우

$("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>

은, 당신은 이미지 소스를 변경하기 위해 jQuery를 호버 기능을 사용할 수 있습니다.

출처

2016-09-21 04:58:09 Scott

'mouseleave'에서 회전을 원하지 않기 때문에 관련 jQuery가 필요합니다. – KingDesigns

@KingDesigns 오, 알았어. 나는 당신이 * 마우스 우회로 돌아가고 싶다고 생각했다. 업데이트 된 스 니펫을 확인하십시오 ... 지금은 돌아 가지 않지만 불투명도는 100 %로 다시 바뀌고 ..... 여전히 여분의 jQuery는 필요하지 않습니다. – Scott

죄송합니다, 정확한 상황을 지정해야합니다. 내가 만들고있는 '위로 가기'입니다. 마우스가 들어갈 때마다 ** 360 회전해야합니다 **. 나는 약간의 어두운 이미지를 가지고 있는데, 동시에 사라지게해야한다. ** mouseleave의 원래 이미지로 되돌아 가야한다. (전체 div를 회전하지 않고). 따라서 합병증. @Scott – KingDesigns

mouseenter와 mouseleave에서 jQuery로 2 개의 이미지를 어떻게 페이드합니까?

답변

관련 문제