We Keep Coding

Why doesn't mouseenter execute every time?

I have a slick slider and on hover of the slider I want it to go to the second slide. I've managed to do this with mouseenter and mouseleave, however if you hover on/off the slider quickly the function doesn't work.
I'm presuming this is because it doesn't have enough time to complete each function but I'm not sure how to get around this. Any advice would be appreciated.
jsFiddle
JS:
$('.slider').on('mouseenter', function (e) {
$(this).slick('slickGoTo', 1);
});
$('.slider').on('mouseleave', function (e) {
$(this).slick('slickGoTo', 0);
});

In the function that you provided:
$(document).ready(function(){
$('.slider').slick({
dots: true,
speed: 1000,
infinite: true,
autoplay: false,
});
});
I see that you have set the speed very high. If you put speed to 10 etc. than it should work better.

Reload bxSlider when revealing previously hidden div

bxSlider has a function to reload slider(s) at a specific action. I initialise multiple sliders on my page in the following way:
jQuery('.product_carousel_images').each(function(index,item) {
jQuery(item).bxSlider({
mode: 'fade',
speed: 600,
pause: 7000,
auto: false,
controls: false,
pager: true,
pagerCustom: '.product_carousel_pager'
});
});
Using jQuery easytabs for a tab layout, the first slider is in the first (i.e. visible) tab and working well, while the second is generated in an initially hidden div. Since bxSlider sets the height of a slider within a div with display:none to 0, the second slider has zero-height images. visibility:hidden isn't an option, since the tabs interface doesn't allow for that.
With this multiple slider function, how can I trigger a reload of my sliders on a specific action, like clicking a tab header?

I don't use bxSlider myself, however I'm guessing you can make use of bxSlider's "reloadSlider" function.
http://bxslider.com/examples/reload-slider
Just keep a reference to your slider at initialization, then call reloadSlider on it whenever you change tabs, which in your case with easy tabs would have to make use of the easytabs:after event.
var slider = jQuery(item).bxSlider({
mode: 'fade',
speed: 600,
pause: 7000,
auto: false,
controls: false,
pager: true,
pagerCustom: '.product_carousel_pager'
});
// Reload slider whenever tab changes
$('#your-tabs-container').bind('easytabs:after', function() {
// TODO identify the displayed tab using EasyTabs target panel parameters in order not to reload bxSlider when the wrong tab is displayed
slider.reloadSlider();
});
More information on EasyTabs' Event Hooks here:
https://os.alfajango.com/easytabs/#configuration

jQuery animation performing strangely due to excessive events?

I have a gallery on my site. Each image is a <div> which has a background image. The overflow is hidden, and I hide a caption div using margin. I then use the following jQuery to animate the captions when the mouse enters and leaves the picture <div>.
$(document).on("mouseenter", ".gallery-image", function(){
$(this).children(".caption").dequeue();
$(this).children(".caption").fadeIn({queue: false, duration: 500}).animate({marginTop: "350px"}, 500);
});
$(document).on("mouseleave", ".gallery-image", function(){
$(this).children(".caption").dequeue();
$(this).children(".caption").fadeOut({queue: false, duration: 500}).animate({marginTop: "400px"}, 500);
});
When I move the mouse in and out too fast weird things start to happen. The caption stays half-faded, or the caption simply stops appearing altogether.
The problem can be seen in this JSFiddle.
Why am I getting this unexpected behavior?

Use .stop(true, true) to stop the pre queues of the animations
$(document).on("mouseenter", ".gallery-image", function(){
$(this).children(".caption").stop(true,true).fadeIn({queue: false, duration: 500}).animate({marginTop: "350px"}, 500);
});
$(document).on("mouseleave", ".gallery-image", function(){
$(this).children(".caption").stop(true,true).fadeOut({queue: false, duration: 500}).animate({marginTop: "400px"}, 500);
});
Fiddle

How to sync two jQuery cycle image sliders?

In my single HTML page I am using two image sliders. For both the sliders I have given the same delay time.
When the page is loaded both image slides are syncing but when the image slides run for few minutes they are not syncing correctly.
Is it possible to make them sync?
$(document).ready(function() {
$('#slide').cycle({
fx: 'fade',
delay: -6000,
});
$('#content_slide').cycle({
fx: 'fade',
delay: -6000,
});
});

Use jQuery animation only for non-phone size devices

I have built and uploaded this site here for a client. I used the Twitter bootstrap and customized it. My issue is the navigation it has jquery to animate the links. However i want this to disable and revert to an vertical list when screen size drops to phone size.
I know bootstrap already has the media queries built in but how do i do this.
Check the site and shrink browser to mobile size and you will see the list button appears but the links are still the same inside.
Not sure if i have made my point very clearly but more more info please ask.
Thanks
Here is the code responsible for animation:
$(document).ready(function () {
//When mouse rolls over
$(".blue").mouseover(function () {
$(this).stop().animate({
height: '100px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
//When mouse is removed
$(".blue").mouseout(function () {
$(this).stop().animate({
height: '50px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
});

Try matchMedia() to apply an animation only on small viewports:
if (window.matchMedia("(max-width: 480px)").matches) {
/* do animation here */
}
Of course you can change 480px to whatever you want or even check for other properties.