How do i use this with my jquery function? (js/jquery noob here)

JavaScript
1

So i have a basic jquery function:

$(document).ready(function() {
  $('#element').animate({
    opacity: 1,
    left: 0
  }, 400, function() {
  // animation complete
  });
});

But i want this to animate when it scrolls into viewport, not when the page loads. For this i have downloaded this plugin: http://static.pixeltango.com/jQuery/Bullseye/

The thing is I don’t understand how to implement it with my jquery function?

Can anyone help me?

Cheers / jesper

2

Hey Jesper,

I’ve not tested it, but going by the Bullseye code I think you want to do something like this:

$('#element')
    .bind('enterviewport', function() {
        $(this).animate({
            opacity: 1,
            left: 0
        }, 400, function() {
          // animation complete
        });
    })
    .bullseye();
3

Thanks, can’t get it to work tho, this is how my code looks now:

	    $(document).ready(function() {
			$('hgroup, #about p')
			    .bind('enterviewport', function() {
			        $(this).animate({
			            opacity: 1,
			            left: 0
			        }, 400, function() {
			          // animation complete
			        });
			    });
			.bullseye();
                  });
4

You need to remove the semicolon as shown below, as it prevents you from chaining the call to the bullseye() method

$(document).ready(function() {
    $('hgroup, #about p')
        .bind('enterviewport', function() {
            $(this).animate({
                opacity: 1,
                left: 0
            }, 400, function() {
              // animation complete
            });
        }); // Remove semicolon
        .bullseye();
});
5

Thanks now its working=)