SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    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
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,437
    Mentioned
    45 Post(s)
    Tagged
    13 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
    289
    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
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,437
    Mentioned
    45 Post(s)
    Tagged
    13 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
    289
    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
  •