Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Function run on click, need to run on setInterval

    Hi guys, I'm not very good with javascript in general, but understand basics, and know what I want to do, but I can't seem to do it.

    I have the following:
    Code:
    $('.box').click(function() {
    
        $(this).animate({
            left: '-50%'
        }, 500, function() {
            $(this).css('left', '150%');
            $(this).appendTo('#container');
        });
    
        $(this).next().animate({
            left: '50%'
        }, 500);
    });
    But I need that function to be executed on a timer, so I assumed setInterval() would be correct to use? But the following does not work. This is where my very limited JS knowledge stops Little help please guys??

    Code:
    setInterval(function() {
    
        $(this).animate({
            left: '-50%'
        }, 500, function() {
            $(this).css('left', '150%');
            $(this).appendTo('#container');
        });
    
        $(this).next().animate({
            left: '50%'
        }, 500);
    }, 2000);
    I've probably barked up completely the wrong tree with it, hopefully you can steer me right?

    Thanks in advance, Dave.

    For reference the function slides div's in a container off of and onto the screen, it works on click.

  • #2
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Apologies, my code I used is as follows, missed of the "$('.box')." at the beginning, still doesnt work though... lol
    Code:
    $('.box').setInterval(function() {
    
        $(this).animate({
            left: '-50%'
        }, 500, function() {
            $(this).css('left', '150%');
            $(this).appendTo('#container');
        });
    
        $(this).next().animate({
            left: '50%'
        }, 500);
    }, 2000);

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    Is this what you want?
    Code:
    $('.box').click(function() {
    	var $this = $(this);
    	setInterval(function() {
    	    $this.animate({
    	        left: '-50%'
    	    }, 500, function() {
    	        $this
    	            .css('left', '150%')
    	            .appendTo('#container');
    	    });
    
    	    $this.next().animate({
    	        left: '50%'
    	    }, 500);
    	 }, 2000);
    });
    Do you really want setInterval and not setTimeout? Using setInterval will execute the function for every 2 seconds. I'm not sure if that's what you want to do.

  • Users who have thanked glenngv for this post:

    dragon2309 (08-22-2013)

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Is this what you want?
    Code:
    $('.box').click(function() {
    	var $this = $(this);
    	setInterval(function() {
    	    $this.animate({
    	        left: '-50%'
    	    }, 500, function() {
    	        $this
    	            .css('left', '150%')
    	            .appendTo('#container');
    	    });
    
    	    $this.next().animate({
    	        left: '50%'
    	    }, 500);
    	 }, 2000);
    });
    Do you really want setInterval and not setTimeout? Using setInterval will execute the function for every 2 seconds. I'm not sure if that's what you want to do.
    Hi Glenn, thankyou for your reply I'm not certain thats what I need to be honest, as it still appears like it would be triggered on click. Although I've run that code in jsfiddle and it doesnt actually appear to do anything :/

    What I'm after is, on page load, for the script to execute automatically, and begin scrolling the div's across the screen, so I imagine it would need to execute the function continuously, 2secs was an example time, it would probably be something more like 10seconds in reality.

    I'm not sure of the difference between setIntrval and setTimeout if I'm honest :/ which one is more suitable to do this? And whats the difference?

    Many thanks, Dave.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    I was just guessing based on the limited info you provided. Can you post the link to jsfiddle?

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by dragon2309 View Post
    I'm not sure of the difference between setIntrval and setTimeout if I'm honest :/ which one is more suitable to do this? And whats the difference?
    setTimeout() method triggers a function once after a period of time (measured in milliseconds) has elapsed. The setInterval() method triggers a function repeatedly (over and over again) at an interval of so-many millseconds. That continues indefinitely until the clearInterval() method is invoked to stop further executions of the function specified in the setInterval() method.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    Without additional info, this is again a shot in the dark.
    Code:
    $(document).ready(function() {
    	setTimeout(function() {
    	    $('.box').animate({
    	        left: '-50%'
    	    }, 500, function() {
    	        $('.box')
    	        	.css('left', '150%')
    	        	.appendTo('#container');
    	    });
    
    	    $('.box').next().animate({
    	        left: '50%'
    	    }, 500);
    	 }, 2000);
    });


  •  

    Posting Permissions

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