JQuery와 - 당신이 가면/콘텐츠

Question

를 표시 숨기는 기능 만들기 : 당신이 내 jQuery를 기능의 데모를 볼 수 있습니다 http://www.awaismuzaffar.com/examples/content_1.html

합니다.

기본적으로, 마우스가 끝난 div에 따라 내용을 숨기거나 표시한다고 가정합니다.

그러나 모든 div 요소 위로 마우스를 가져 가면 모든 텍스트가 서로 겹치고 있다는 것을 알 수 있습니다.

마우스가 다른 div 위에있을 때 이전 div의 내용을 숨기는 방법을 찾아야합니다. 이 작업을 수행하는 방법을 잘 모릅니다.

$(document).ready(function(){ 
    var current_id; 
    $('div.video_image').hover(
     function(){ 
      current_id = $(this).attr('id').split('_')[1]; 
      $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');     
     } 
    ); 
}); 

감사 : 여기

는 jQuery 코드의 조각이다.

Answer 1

뭔가 새로운 텍스트를 넣어하는 것입니다. 당신이 요소 떨어져 마우스를 이동할 때 가져가 재설정되지 않기 때문에 http://jsbin.com/apiya3

$(document).ready(function(){ 
    var current_id, previous_id; 
    $('div.video_image').hover(
     function(){ 
      previous_id = current_id; 
      if (previous_id) 
       $('div#text_' + previous_id).stop().animate({'opacity': '0'}, 'slow'); 

      current_id = $(this).attr('id').split('_')[1]; 
      $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');     
    }); 
}); 

Answer 2

element.hide() 및 element.show() 기능을 사용해 보셨습니까? 속도를 매개 변수로 사용합니다 (예 : '느림', '빠름'등).

Answer 3

해결책은 큰 사업부 (.empty 기능)을 삭제하고 내부 (으로 .Append() 함수 또는 .html() 함수) 작동 할 수 있습니다와 같은

Answer 4

당신은 대신 호버의 마우스 오버와로 마우스 기능을 사용한다 : 여기에 행동이 스크립트의 예입니다. 또한 show() 및 hide() 함수는 불투명도에 애니메이션을 적용하는 것보다 쉽습니다.

$(document).ready(function(){ 
var current_id; 
$('div.video_image').mouseover(
    function(){ 
     current_id = $(this).attr('id').split('_')[1]; 
     $('div#text_' + current_id).stop().show('slow');     
    }); 
$('div.video_image').mouseout(
    function(){ 
     $('div#textcontainer).children().hide('slow'); 

}); 

아니면 적어도 그런 일

...