Note: The examples are tested with chrome.
Firefox ia not working.
I have this js code to append css transitions.
For a single image (working):
var isTransition = false;
var isRemoveQueue = false;
$( ".text" ).bind( "webkitTransitionEnd mozTransitionEnd transitionEnd", function () {
isTransition = false;
if ( isRemoveQueue ) {
$( this ).removeClass("animated-hover");
}
});
$(".text").on( 'mouseenter', function () {
$(this).addClass("animated-hover");
isTransition = true;
isRemoveQueue = false;
});
$(".text").on( 'mouseleave', function () {
if ( !isTransition ) {
$( this ).removeClass( "animated-hover" );
} else {
isRemoveQueue = true;
}
});
fiddle: https://jsfiddle.net/drecodeam/3pb38v4f/6/
It was important to me, that the transition does not stop if you just hover quick over the image. It is working good with one image.
Here is the thing: If i am using more images than one, i have weird effects, like the transition getting stuck e.g.
Example with more images:
https://jsfiddle.net/3pb38v4f/9/
Beside it is not working correctly, it is also not working with firefox.
You could just use
$(".text").on( 'mouseleave', function () {
$( this ).removeClass( "animated-hover" );
isRemoveQueue = true;
});
I think you over thought it a little :)
Hoverflow is exactly what i was looking for.
It can handle the queuing in js very nice and clean :)
http://www.2meter3.de/code/hoverFlow/
Related
Scope of what I am trying to do: Various numbers of FAQ's are being pulled in upon build via yaml file which will have only the Question showing by default and then upon click the appropriate Answer will show.
I have figured out how to add a unique class for each question and each answer but I can't figure out how to toggle answer1 when question1 is clicked.
I appreciate any help! I am still learning javascript/jquery and get lost easily so if you could help explain or point to documentation of what I am missing I would appreciate it!
https://jsfiddle.net/texobyte/jns7v9ox/
$(".faqQuestion").each(function (i) {
$(this).addClass("question" + (i + 1));
});
$(".faqAnswer").each(function (i) {
$(this).addClass("answer" + (i + 1));
});
$("#toggle-faq h5").hide();
$("#toggle-faq").click(function () {
$("#toggle-faq h5").slideToggle("slow", function () {});
});
You could also try this (after changing the id "toggle-faq" to a class, as the other answer says):
$(".toggle-faq h5").hide();
$(".toggle-faq").on('click', function () {
if ($(this).hasClass("active")) {
$(this).children("h5").slideToggle();
$(this).removeClass("active");
return;
}
$(".active").children("h5").slideToggle();
$(".active").removeClass("active");
$(this).addClass("active");
$(this).children("h5").slideToggle();
});
The "this" means that it will only toggle the .toggle-faq that has been clicked on, and not all of them.
I have worked on you Fiddle and made few modifications to make it working. Here is the LINK
I have replace id="toggle-faq" with class="toggle-faq"; we should not repeat ids:
<div class="toggle-faq">
Also replaced this code:
$("#toggle-faq h5").hide();
$("#toggle-faq").click(function () {
$("#toggle-faq h5").slideToggle("slow", function () {});
});
With a better and working code:
// hide all answers at first
$( '.faqAnswer' ).hide();
$( '.toggle-faq' ).on('click', function () {
var $this = $(this);
// if this is already open
if ( $this.hasClass('active') ) {
return;
};
// close any other already open...
if ( !!currentSelected ) {
currentSelected.find( '.faqAnswer' ).slideToggle( 'slow' );
};
// ...and then open the clicked item
$this.find( '.faqAnswer' )
.slideToggle( 'slow', function () {
// now, make sure this is currentSelected
currentSelected = $this;
});
});
Let me know if you have any doubts. Good luck, have fun!
I have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:
SlideDown on mouseenter
Stay visible until mouseleave
When mouseleaves, delay the SlideUp by 2 seconds
^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached
JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/
$(document).ready(function(){
$hover = true;
$( "#slide" ).mouseenter(function() {
if($hover) {
$( ".slide--hidden" ).slideDown('fast');
}
});
$( "#slide" ).mouseleave(function() {
$hover = false;
$( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
enableHover();
$(this).dequeue();
});
});
function enableHover() {
$hover = true;
}
});
Replace your javascript with this. It works great if i understood your problem correctly.
$(document).ready(function(){
var thetimeout;
$('#slide').mouseover(function() {
clearTimeout(thetimeout);
$('.slide--hidden').slideDown();
});
$('#slide').mouseleave(function() {
thetimeout = setTimeout(function() {
$('.slide--hidden').slideUp();
}, 2000);
});
});
For some reason, when I try to toggle a div between two sizes using .animate, it simply disappears rather than scaling to the size I want it to. I have played with all of the the syntax and little things in so many ways, but nothing works. Here is the jquery that I have used and messed around with a bunch.
$("#expandable").click(
function() {
$("#expandable").toggle(
function() {
$("#expandable").animate(
{width:600, height:600}
)
},
function() {
$("#expandable").animate(
{width:400, height:200}
);
}
);
}
);
I have a jsfiddle here for you to look at.
http://jsfiddle.net/justinbc820/qt7GV/
Try it without using toggle
http://jsfiddle.net/qt7GV/9/
$(document).ready(function(){
$("#expandable").click(function(){
var divheight = $(this).height();
if (divheight == 400)
{
$(this).animate({height:'150px', width:'150px' });
}
else
{
$(this).animate({height:'400px', width:'400px' });
}
});
});
Take a look at this http://jsfiddle.net/qt7GV/4/
$("#expandable").click(function() {
if ($(this).width() < 600) {
$(this).animate(
{width:600, height:600}
)
} else {
$(this).animate(
{width:400, height:200}
);
}
});
http://api.jquery.com/toggle/
Description: Display or hide the matched elements.
var on = false;
var box = $("#expandable");
box.click(
function() {
if (on = !on) {
box.animate(
{width:600, height:600}
)
} else {
box.animate(
{width:400, height:200}
);
}
}
);
According to http://api.jquery.com/toggle-event/
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.
Here is one way to do it
$('#expandable').data('flag', true);
$("#expandable").click(
function() {
$("#expandable").animate(
$(this).data('flag')
? {width:600, height:600}
: {width:400, height:200}
)
$(this).data('flag', !$(this).data('flag'));
}
);
Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery, so any help would be appreciated.
Thanks.
EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?
I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:
http://jsfiddle.net/US4Fc/1/
var duration = 1000
function InOut(elem) {
elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#content li').hide().hover(
function() {
$(this).stop(true)
},
function() {
var curOp = Number($(this).css("opacity"));
$(this).fadeTo(duration*(1-curOp), 1, function() {
InOut($(this))
});
}
);
InOut($('#content li:first'));
});
Will this work for you?
$(function(){
var active;
$('#content li').hide().hover(
function(){
active = $(this).stop();
},
function(){
active && InOut(active);
}
);
InOut( $('#content li:first') );
});
The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});
Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);
If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);