SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    So i have a basic jquery function:

    Code JavaScript:
    $(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. #2
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,270
    Mentioned
    33 Post(s)
    Tagged
    5 Thread(s)
    Hey Jesper,

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

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

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    Hey Jesper,

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

    Code JavaScript:
    $('#element')
        .bind('enterviewport', function() {
            $(this).animate({
                opacity: 1,
                left: 0
            }, 400, function() {
              // animation complete
            });
        })
        .bullseye();
    Thanks, can't get it to work tho, this is how my code looks now:

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

  4. #4
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,270
    Mentioned
    33 Post(s)
    Tagged
    5 Thread(s)
    You need to remove the semicolon as shown below, as it prevents you from chaining the call to the bullseye() method

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

  5. #5
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    You need to remove the semicolon as shown below, as it prevents you from chaining the call to the bullseye() method

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •