Jquery swap image gallery on mouseover - javascript

I have created this DEMO for my question.
In my demo you can see when you hover over the thumbnail image with the mouse the bigger picture is changing. What i want to? I want to change the images automatically after a few second.
What i need to do for it ? Anyone can help me ?
$(document).ready(function() {
$("#magazin_sldwr li img").hover(function(){
$('#mainm-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#magazin_sldwr li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}

This is a start : demo
The idea is to use an .active class on the parent li of the current image, and then trigger a mouseenter event every 2 seconds :
function autoChangeImage() {
setTimeout(function(){
$("#magazin_sldwr li.active")
.removeClass('active')
.next('li')
.addClass('active')
.children('img')
.trigger('mouseenter');
autoChangeImage();
}, 2000);
}
Of course, you will probably want to go back to the first thumb after having reached the last one, and clearTimeout when hovering a thumb "manually" : demo

use setInterval()
setInterval(function() {
//change image
}, 2000);
Where 2000 is the number of miliseconds. For o ly one change you can use setTimeout()

Related

How to jQuery show element fast while hide with small duration

how can I in jQuery toggle element on faster than toggle this element off in miliseconds?
There is my code:
jQuery(document).ready(function() {
$('.enmenu').on('click', function(){
$('.ensettings').fadeToggle();
return false;
});
$('html, body').on('click',function(){
$('.ensettings').hide();
});
$(".ensettings").click(function(e){
e.stopPropagation();
});
});
/* Dropdown menu - End */```
You can use fadeToggle conditionally to set the speed of the toggle.
$('.enmenu').on('click', function() {
var el = $('.ensettings');
el.fadeToggle(el.is(":hidden") ? 200 : 5000);
});
Instead of using fadeToggle, simply use hide or show with the duration parameter set. To know if an element is hidden or not, use is(":hidden"):
$('.enmenu').on('click', function(){
var $elem = $('.ensettings');
if($elem.is(":hidden")) { // if element is hidden
$elem.show(200); // show with 200 miliseconds animation
} else { // otherwise
$elem.hide(5000); // hide with 5000 miliseconds animation
}
return false;
});

Show popup on hover only if i hover on li after 1 second

I'm trying to show inner div on hover on li. I'm doing fadeIn and fadeOut effect but the problem is when I hover quickly on all li fadeIn effect work for all. Where it should show only if I hover on li for 1 second and if I leave that element before one second it shouldn't show fadein effect.
<script type="text/javascript">
$(document).ready(function(){
var _changeInterval = null;
$( ".badge_icon" ).hover(function() {
clearInterval(_changeInterval)
_changeInterval = setInterval(function() {
$(this).find(".badges_hover_state").fadeIn(500);
}, 1000);
},function() {
$(this).find('.badges_hover_state').fadeOut(500);
});
});
</script>
I have tried to use stop(), delay() also but didn't get success. At last I tried to do with time interval but now my code has stopped working.
you could use this jquery script:
var myTimeout;
$('#div').mouseenter(function() {
myTimeout = setTimeout(function() {
//Do stuff
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
});
See the DEMO
Was able to solve this issue by adding window in front of variable name.
var myTimeout;
$('.div').mouseenter(function() {
window.el = $(this);
myTimeout = setTimeout(function() {
el.css("width","200px");
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
el.css("width","100px");
});

Jquery delay is not working after hover

I have problem with jQuery delay. I need to add a class after 5 seconds, so I wrote this:
Working example:
$('#category #product_list .ajax_block_product').on('mouseover',function(){
var that = $(this);
setTimeout(function(){
that.find('.sl').show();
that.find('.product_img_link img').hide();
that.addClass('hovered');
}, 500);
});
$('#category #product_list .ajax_block_product').on('mouseleave',function(){
$(this).find('.sl').hide();
$(this).find('.product_img_link img').show();
$(this).removeClass('hovered');
});
It is working on the first time, but when I hover a second time, the hovered class is not added and I do not know why.
Can someone help me with this problem?
Try to use;
var tm;
$('#category #product_list .ajax_block_product').on('mouseover',function(){
var that = $(this);
tm = setTimeout(function(){
that.find('.sl').show();
that.find('.product_img_link img').hide();
that.addClass('hovered');
}, 500);
});
$('#category #product_list .ajax_block_product').on('mouseleave',function(){
clearTimeout(tm);
that.find('.sl').hide();
that.find('.product_img_link img').show();
that.removeClass('hovered');
});
You need to change the 500 to 5000, as mentioned in the comments. 100 = 100ms (millisecond), not 1 second. 1 second = 1000ms.

Only Show Divs When Hovering Button for X Time - Can't make it work properly

So I'm making a menu that shows various divs when you hover over the menu buttons, but the problem is that the events fire immediately as you hover over the buttons, which I don't want, because if you slide the mouse over more than one button, then they all fire at once and show / hide the div containers (looks bad).
I want the events to fire only if the user hovers the buttons for a certain amount of time, like 500ms, because that way they will only see one div container at a time.
This is the code I'm using, e.g. for the menu button:
$(".menu-button").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".menu-container").delay(300).slideDown(800);
});
var myTimer = false;
$(".menu-button, .menu-container").hover(function(){
//mouse enter
clearTimeout(myTimer);
},function(){
//mouse leav
myTimer = setTimeout(function(){
$(".menu-container").slideUp(500);
},100)
});
Fiddle: http://jsfiddle.net/1g0Lraec/5/
It's driving me nuts, I hope someone can help me out!
Thank you :-)
You can use this :
var upTimer = false ,
downTimer = false ,
isHover = false ;
$(".menu-button, .menu-container").hover(function(){
isHover = true;
clearTimeout(upTimer);
downTimer = setTimeout(function(){
if(isHover)
$(".menu-container").slideDown(500);
},500);
},function(){
isHover = false;
clearTimeout(downTimer);
upTimer = setTimeout(function(){
$(".menu-container").slideUp(500);
},100);
});
JSFIDDLE
This will work also :
var downTimer = false
$(".menu-button, .menu-container").hover(function(){
downTimer = setTimeout(function(){
$(".menu-container").slideDown(500);
},500);
},function(){
clearTimeout(downTimer);
$(".menu-container").slideUp(500);
});

Adding delay to mouse out function

I have one drop down menu,
<ul>
<li><a>link 1</a>
<ul><li><a>link 1</a></li></ul>
</li>
</ul>
I am using the following JS to use hover and show child menus.
I want to add delay to the mouse out function (when the class of the LI removed) about 500ms,
$('li').hover(function(){
$(this).addClass('over');
}, function(){
$(this).removeClass('over');
});
Please do needful in this.
thanks in advance
You can do something like this:
$('li').hover(function(){
var timer = $(this).data('timer');
if(timer) clearTimeout(timer);
$(this).addClass('over');
}, function(){
var li = $(this);
li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500));
});
This clears any timeout when hovering over it (in case you hover, leave, hover back you need to check this) and sets a 500ms delay when leaving the hover, storing the timeout ID on the li itself using .data().
$('li').hover(function(){
$(this).addClass('over');
}, function(){
setTimeout(function(){$(this).removeClass('over')}, 500);
});

Categories

Resources