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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post

    Jquery slider problem.

    Having trouble with this code.

    This is the video problem.
    http://www.youtube.com/watch?v=IVves...ature=youtu.be

    This is the relevant code
    Code:
    <body>
    	<div onmouseover="rotate(this, ['image1', 'image2', 'image3']);" id="slider1">
    		<img id="image1" style="z-index:9999;" src="1.jpg" />
    		<img id="image2" style="z-index:9998;" src="2.jpg" />
    		<img id="image3" style="z-index:9997;" src="3.jpg" />
    	</div>
    <script>
    	var start = 0;
    	var zindex = 9996;
    	function rotate(obj, images){
    		end = 2;
    		if (parseInt(start) == parseInt(end)){
    			$('#'+images[start]+'').stop(true).animate({top:"-300px", opacity:0}, {duration: 400, complete : function (){
    				$(this).css("z-index", zindex);
    			}}).animate({top:"0px", opacity:1}, 10);
    			start = 0;
    		}else{
    			$('#'+images[start]+'').stop(true).animate({top:"-300px", opacity:0}, {duration: 400, complete : function (){
    				$(this).css("z-index", zindex);
    			}}).animate({top:"0px", opacity:1}, 10);
    			start++;
    		}
    		zindex--;
    	}
    </script>
    </body>
    Ps: if someone knows a jquery plugin that can do that. a simple one with minimum size please show me!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You should switch from an onmouseover attribute (which fires constantly during hover) to a .mouseenter() jQuery event handler (which only fires once upon entering the element)

    Code:
    $('#slider1').mouseenter(function() {
       ...
    }

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post
    But how could i get the array "images"?
    That way i'd lose the array.
    rotate(this, ['image1', 'image2', 'image3']);

    is there a way to get all the images inside the Div in an array?

  • #4
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post
    Got it!

    I did this.
    Code:
    <body>
    	<div id="slider1">
    		<img id="image1" style="z-index:9999;" src="1.jpg" />
    		<img id="image2" style="z-index:9998;" src="2.jpg" />
    		<img id="image3" style="z-index:9997;" src="3.jpg" />
    	</div>
    	<div id="lol"></div>
    <script>
    if(typeof jQuery != 'undefined') {
    	$(function() {
    		var start = 0;
    		zindex = 9996;
    		$('#slider1').mouseenter(function (){
    			var images = $(this).find('img').map(function(){
                           return this.id;
                       }).get();
    			end = 2;
    			atual = start + 1;
    			$('#'+images[start]+'').stop(true, true).animate({top:"-300px", opacity:0}, {duration: 500, complete: function (){
    				$(this).css('z-index', zindex);
    				$(this).animate({top:"0px", opacity:1}, 100);
    			}});
    			if (parseInt(start) == parseInt(end)){
    				start = 0;
    			}else{
    				start++;
    			}
    			zindex--;
    		});
    	});
    }
    </script>
    </body>


  •  

    Posting Permissions

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