Jquery help. Probably Easy

JavaScript
1

Hey folks. I’ve watched enough Jquery tutorials to be dangerous (and completely screw up otherwise fine sites)…but am pretty stumped at how best to accomplish an effect I am looking for.

Basically, I would like to have an image positioned to the left in a div. When the image is clicked, I would like it to scroll out of view (to the left) and then scroll BACK…to the right…but as a different (slightly changed) image. I attached a pic to get a visual because I am horrible at explaining things.

Can anyone offer any advice?

2

One way is to use the .animate() method to move the object off-screen, so you can then change the object, and animate it back onscreen again.

It can be more difficult though to develop your own image-change routine, which is why people commonly choose to instead find a plugin that they can make use of instead in order to achieve a similar result.

3

Hmmm…

What if I took the image and made it the background of a wrapper. When the wrapper is clicked, it should be pretty easy to scroll it off screen, modify the CSS (change the background) and scroll it back?

Am I looking at this all wrong?

4

What benefit does the wrapper serve, when moving the image itself is easily achieved by adjusting CSS properties, and the image is easily changed by setting a different src attribute?

5

Oh! I forgot I could modify src.

So…thinking out loud here:

Image (relatively positioned) is clicked.

I set the left position so that is in effect hidden (image will be placed in a div with overflow: hidden) and use animate() to make it look nice.

Call a function to toggle the source of the image element.

Reset the left position so it is shown, again animating() to make it look nice.

Or am I missing something?

6

Ok, last thought…

Wouldn’t it be more efficient to use a wrapper with the image as a background? Then I could use sprites (adjusting the css class and shifting the background), and everything would be nice and smooth rather than hitting the server for a new image when it is clicked (at least initially).

7

Oh, I see.

I just intend to use it for a little “one time use” part of a page. Just for the effect.

I googled and got pretty close to where I want to be, but it’s not perfect. Unfortunately, I do not understand jQuery well enough to fix it.



<html>
<head>
<style>

body {
  margin: 0;
  padding: 0;
}

.switchme {
 position: relative;
 top: 10px;
 left: 0;
 width: 600px;
 height: 10px;
}

.on {
 background: #00ff00;
}

.off {
 background: #ff0000;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
 $(document).ready(function() {
   $('#go').click(
    function() {
    
        $(".switchme").animate({left: "-600"}, "slow");
            
        if ($(".switchme").hasClass('on')) {
            $(".switchme").removeClass('on').addClass('off');
        }  else {
            $(".switchme").removeClass('off').addClass('on');
        } 
        $(".switchme").animate({left: "0"}, "slow");
        return false;
    } 
 ); 
 });
</script>

</head>
<body>
<div class="switchme on"> </div> <p><a href="#" id="go">go go!</a></p>
</body>
</html>

This works, but for some reason the removeClass function is “skipping ahead in line”. It is not waiting for the animate function to complete.

8

That depends on what you intend to use the images for. If it’s for an image gallery, the sprites for such a gallery would be much larger than is feasible to use.

9

You’d need to put the code for animating the second part in the completion callback:


 $(document).ready(function() {
   $('#go').click(
    function() {
    
        $(".switchme").animate({left: "-600"}, "slow",function(){
            if ($(".switchme").hasClass('on')) {
                $(".switchme").removeClass('on').addClass('off');
            }  else {
                $(".switchme").removeClass('off').addClass('on');
            } 
            $(".switchme").animate({left: "0"}, "slow");
        });
        return false;
    } 
 ); 
 });

You could probably improve the code a little by storing the jquery collection in a variable and toggling one css class rather than having an ‘on’ and ‘off’ class (ie, the absence of ‘on’ is your off state):


 $(document).ready(function() {
   $('#go').click(
    function(e) {
        var $switch = $(".switchme");
        $switch.animate({left: "-600"}, "slow",function(){
            $switch.toggleClass('on').animate({left: "0"}, "slow");
        });
        e.preventDefault();
    } 
 ); 
 });
10

Thank you very much!!!

I got it working with this:


<script>
 $(document).ready(function() {
   $('#go').click(function() {
    
        $(".switchme").animate({
        left: "-600"
        }, "slow", function() {
            
        if ($(".switchme").hasClass('on')) {
            $(".switchme").removeClass('on').addClass('off');
        }  

        else {
            $(".switchme").removeClass('off').addClass('on');
        } 

        });
        $(".switchme").animate({left: "0"}, "slow");
        });

        return false;
 });
</script>

But that was through trial and error and not really understanding what I was doing. Your example is obviously much cleaner.

I guess I should really just read up on jQuery. Watching a couple basic tutorials is not helping me with syntax, which is where my problem is.

Again, thank you.