Question

I have a simple slide animation after an img link is clicked.
The client is requesting the link open in a new window/tab.
Every option I have tried window.openor window.location = href; with the var href = this.href; set, does not work.

$("#coatings").click(function(event) {
         event.preventDefault();
         var href = this.href;

         $("#sqeeguee_rightLink").fadeIn(100).animate({
            right:'-=450px'                 
         }, 2000,
         function() {
             window.location = href;
         });
     });

HTML:

<div id="sqeeguee_rightLink"></div>
        <a href="url here" target="_blank" id="coatings"><img src="coatings.jpg" width="456" height="592" alt="" /></a>

Any input would be great!

Answer 1

The code you’ve quoted presumably “doesn’t work” because after the animation is complete, the new URL is opened in the same window. You’ve cancelled the event that would have opened the new window (by calling event.preventDefault()).

Your window.open attempt fails because modern browsers only allow JavaScript code to open windows during the processing of a user-initiated event (such as a click). Your animation is started by the user-initiated event, but then allows the event handler to complete, so when you try to do window.open, as far as the browser is concerned, you’re opening a spam window, and its popup block prevents that from happening. 🙂

If your goal is to show an animation on the current window, and then open a new window when it’s done, I’m afraid there’s no clean way to do that. You might be able to allow the original new window to open but get it to go to the background (a “pop-under”), and then when the animation is complete, bring it to the foreground. I can’t see that as a great user experience, though.