jQuery mouseover 및 mouseout이 원하는대로 작동하지 않습니다.

-2

jquery mouseover 및 mouseout이 css 함수와 함께 작동하지 않는 문제가 있습니다. 이미지 슬라이더의 단추에 전환 효과를 적용하려고합니다.jQuery mouseover 및 mouseout이 원하는대로 작동하지 않습니다.

내 HTML 코드 :

<div id="hero"> 
    <div id="next"> 
     <img class="nxt" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/next.png"/> 
    </div> 
    <!--END--Next--> 

    <div id="prev"> 
     <img class="prv" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/prev.png"/> 
    </div> 
    <!--END--Prev--> 

    <div id="slider"> 
     <img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide1.png"/> 
     <img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide2.png"/> 
     <img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide3.png"/>    
    </div> 
    <!--END--Slider--> 
</div> 
<!--END--Hero-->

내 CSS 코드 :

#hero { 
    width: 944px; height: 360px; 
    position: relative; 
    margin: auto; 

} 

#slider { 
    width: 944px; height: 360px; 
    position: absolute; 
    overflow: hidden;  
} 

#next { 
    position: absolute; 
    top: 250px; 
    right: 15px; 
    z-index: 99; 
    cursor: pointer; 
    opacity: 0.3; 
} 

#prev { 
    position: absolute; 
    top: 250px; 
    left: 15px; 
    z-index: 99; 
    cursor: pointer; 
    opacity: 0.3; 
}

그리고 마지막으로 내 JS 코드 :

$(function() { 
    $("#hero").mouseover(function() { 
     $this = $(this); 
     $this.find("#next").css(
      "transition":"all 0.2s ease-in", 
      "opacity":"1" 
     ); 
    }).mouseout(function() { 
     $this = $(this); 
     $this.find("#next").css(
      "transition":"all 0.2s ease-out", 
      "opacity":"0.3" 
     ); 
    }); 
});

내가 자바 스크립트와 JQuery와 새로운 오전 염두에 베어하시기 바랍니다 그래서 어떤 도움을 많이 주시면 감사하겠습니다.

출처

2014-06-06 MartynMc

그것은해야한다 :'.CSS ({전환 : "모든 0.2 초 편의성에"당신은 단지 불투명도를 변경하려고하는 경우, 당신은 더 나은 단지 CSS와 함께 할 , 불투명도 : 1})'등. 이제는 먼저 자바 스크립트를 디버깅하는 법을 배워야합니다. BTW,'$ this.find ("# next")'ID는 문서 컨텍스트에서 ID가 고유해야하므로 의미가 없습니다. –

은 정확히 어떻게 진행되고 있으며 무엇을 기대하고 있습니다. 그냥 일부 코드를 게시하고 "작동하지 않습니다"는 우리에게 아무것도 알려주지 않습니까? – adeneo

그리고 자바 스크립트없이 둘 다 할 수있는 CSS의 'ease-in-out'이 있습니까? – adeneo

mouseleave 기능을 사용해보세요.

$(function(){ 
    $("#hero").mouseover(function() { 
     $this = $(this); 
     $this.find("#next").css({ 
      "transition":"all 0.2s ease-in", 
      "opacity":"1" 
     }); 
    }).mouseleave(function() { 
     $this = $(this); 
     $this.find("#next").css({ 
      "transition":"all 0.2s ease-out", 
      "opacity":"0.3" 
     }); 
    }); 
});

출처

2014-06-06 13:18:25 Illaya

CSS 방법에 대한 올바른 구문이 아니지만 mouseleave에 관한 좋은 캐쉬 –

mouseleave로 전환하는 경우 mouseenter를 사용하면 의미가 있습니다. 그러나 마우스 오버 및 마우스 아웃이 아니라는 것을 어떻게 알 수 있습니까? 정확히 OP가 원하는 것. – adeneo

코드를 Fiddle에 넣었습니다. 이것은 작동하지 않습니다.

그런 다음 약간 지워 버리고 문법 오류 here과 voila를 제거했습니다. 작동합니다.

참고 :

#next{ 
    opacity: 0.3; 
    transition: all 0.2s; 
    transition-timing-function: ease-out; 
} 

#hero:hover #next{ 
    opacity: 1; 
    transition-timing-function: ease-in; 
} 

/*DON'T FORGET TO PREFIX THE TRANSITION-ATTRIBUTES*/

출처

2014-06-06 13:52:06 LuudJacobs

jQuery mouseover 및 mouseout이 원하는대로 작동하지 않습니다.

답변

관련 문제