Sliding an Image to the right, while opening a new window url with timeout

Question

I have a set of div's with content which is hidden by an image overlay. I have this code which sets display:none to the image to reveal the hidden content.

<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>

I'm trying to add two actions to this script ...

1. Instead of just display:none the cover images, I'd like to slide them to the right before hiding them. I've tried replacing

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

   with

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

   but it breaks the script?

2. Secondly, I'd like to add a delayed url open. In the past I've used something like

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

attached to a separate button. When I try just adding it to the image covering the hidden content instead, nothing happens.

How do I add these to functions to the script I'm using? Thanks for any clues!

Answer 1

hide("slide",...) is part of jQuery UI (although I'm not sure slide even exists in that API).

Try this instead:

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

( fiddle: http://jsfiddle.net/b66ujfoh/5/ )

• This first animates the image to slide to the right, for a distance of it's own width.
• When the animation has finished, the complete-function is executed, where the image is hidden.
• In the animation code, 500 (ms) is the duration of the animation, change that to whatever you like.
• The .each(function(){ iterates over every element with class="otherContainers" , so that clicking on any one of the images with that class, will cause all the images to slide and hide.
  (It also makes sure every image slides the distance of it's own width, and not the width of the clicked image.)
• The delayed window.open() doesn't seem to work in the code snippet, but in the jsfiddle it does, StackOverflow probably has popups disabled or something.
• I added an alternative squeezing animation (commented out), I thought maybe you like that even more, just pick the one you like.