이미지를 오른쪽으로 밀면서 새 창을 여는 동안 시간 초과로 인해 URL이 보입니다.

Question

이미지 오버레이에 의해 숨겨진 내용으로 된 div가 있습니다. 숨겨진 내용을 표시하려면 이미지에 display : none을 설정하는 코드가 있습니다.

<div style="display: inline-block; position: relative;left:600px;"> 
    hidden content 
    <img src="01.jpg" class="otherContainers" style="position:absolute;top:0;left:0;"> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type='text/javascript'> 
    $(window).load(function(){ 
     $(".otherContainers").click(function() { 
      $(".otherContainers").css('display', 'none'); 
     }); 
    }); 
</script> 

나는이 스크립트에이 작업을 추가하기 위해 노력하고있어 ...

대신 단지 화면의

1. : 없음 커버 이미지가, 내가 숨어 전에 오른쪽으로 밀어 넣 싶습니다 그들. 나는

   $(".otherContainers").hide('slide',{direction: "right"}, 1000); 
   

   와

   $(".otherContainers").css('display', 'none'); 
   

   를 교체 해봤지만 스크립트를 나누기?

2. 두 번째로 지연된 URL을 추가하고 싶습니다. 과거에 나는 별도의 버튼에 부착

   <a onclick=\"setTimeout('window.open(\'THEURL\')', 8000);\" rel='nofollow'>button img</a> 
   

같은 것을 사용했습니다. 대신 숨겨진 콘텐츠를 포함하는 이미지에 추가하려고하면 아무 일도 일어나지 않습니다.

내가 사용하고있는 스크립트에이 기능을 어떻게 추가합니까? 모든 단서 주셔서 감사합니다!

Answer 1

hide("slide",...)은 jQuery UI의 일부입니다 (단, 해당 API에는 slide도 존재하지 않음).

대신을 시도해보십시오

는

$(window).load(function(){ 
 
    $(".otherContainers").click(function(){ 
 
    $(".otherContainers").each(function(){ 
 
     $(this).animate({left:'+='+$(this).width()},500,function(){$(this).hide()}); 
 

 
     //alternative squeezing animation 
 
     //$(this).animate({width:0,height:$(this).height(),left:'+='+$(this).width()},500,function(){$(this).hide()}); 
 
    }); 
 
    setTimeout(function(){window.open('http://api.jquery.com/animate/');},2000); 
 
    }); 
 
});

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

 
<div style="display:inline-block; position:relative; left:60px;"> 
 
    hidden content 
 
    <img src="http://placehold.it/200x200&text=image" class="otherContainers" style="position:absolute; top:0; left:0;" /> 
 
</div> 
 

 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
 

 
<div style="display:inline-block; position:relative; left:60px;"> 
 
    hidden content 
 
    <img src="http://placehold.it/300x150&text=image" class="otherContainers" style="position:absolute; top:0; left:0;" /> 
 
</div>

( 바이올린 : http://jsfiddle.net/b66ujfoh/5/)

• 첫 번째는 자신의 폭의 거리, 오른쪽으로 슬라이드 이미지를 애니메이션.
• 애니메이션이 끝나면 이미지가 숨겨진 완성 기능이 실행됩니다.
• 애니메이션 코드에서 500 (ms)은 애니메이션의 재생 시간이므로 원하는대로 변경하십시오.
• .each(function(){은 모든 요소를 ​​class="otherContainers"으로 반복하므로 해당 클래스의 이미지 중 하나를 클릭하면 모든 이미지가 슬라이드되어 숨겨집니다.
  는 (그것은 또한 모든 이미지는 그 자체가 폭의 거리 및 클릭 한 이미지의하지 폭을 슬라이드 확인합니다.)
• 지연된 window.open()는 코드에서 제대로 작동하지만, jsfiddle하지 않습니다 그것은, StackOverflow 아마도 팝업이 비활성화 또는 뭔가있다.
• 다른 압박 애니메이션 (주석 처리 된)을 추가 했으므로 나는 그 이상을 좋아할 것이라고 생각했습니다. 좋아하는 것을 선택하십시오.