The idea is to move a div downwards slightly when hovered and when clicked to move further down to reveal content. The problem is that when you have clicked the div and it moves down you are no longer hovering on it so it performs the 'close when not hovered function.
$(function () {
$('.more').hover(function () { //Open on hover
$('#pull_down_content').animate({
'top': '-360px'
}, 1000);
}, function () { //Close when not hovered
$('#pull_down_content').animate({
'top': '-380px'
}, 1000);
});
});
$('.more').click(function () { //Move down when clicked
$('#pull_down_content').animate({
'top': '0px'
}, 1000);
});
Put a class on the element to signify that it has been clicked, and do not close it if it has that class:
$(function() {
$('.more').hover(function(){ //Open on hover
$('#pull_down_content').animate({'top':'-360px'},1000);
},
function(){ //Close when not hovered
if (!$('#pull_down_content').hasClass("expanded"))
$('#pull_down_content').animate({'top':'-380px'},1000);
});
});
$('.more').click(function(){ //Move down when clicked
$('#pull_down_content').addClass("expanded").animate({'top':'0px'},1000);
});
Of course you now need another trigger to determine when exactly to undo the hover animation after the item has been clicked; how to do that exactly depends on the effect you want to achieve.
The problem is that when you have clicked the div and it moves down
you are no longer hovering on it so it performs the 'close when not
hovered function.
I'm not sure I get it? You do know that the element with the bound events is not the same as the one that you are animating ?
Anyway, something like this maybe:
$(function() {
$('.more').on('mouseenter mouseleave click', function(e) {
if (!$(this).data('clicked')) {
var Top = e.type==='mouseenter' ? '-360px' : e.type==='click' ? '0px' : '-380px';
$('#pull_down_content').stop().animate({'top': Top}, 1000);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$('#pull_down_content').stop().animate({'top': '-380px'}, 1000);
}
}
});
});
FIDDLE
Related
I have one proplem and I hope you guys could help me with it.
Please check my jsfiddle > myFiddle
If you'll click on the 'Details' button you will see the more information about the item with a simple animation.
You can close this details by clicking on the 'cross' icon on the top left corner and you will see the closing animation.
My proplem:
When current item (container) details is opened (and I am not closing details with the 'cross' icon) if I click on other item 'Details' button the first item (container) details did not hide (with the animation).
If someone could help, that would be amazing
Thanks
jQuery('.btn.desktop').click(function(){
jQuery('.btn.desktop.active').not(this).removeClass('active');
jQuery(this).addClass('active');
jQuery('.direction-container.active').not(this).removeClass('active');
jQuery(this).addClass('active');
// If button has class active
if (jQuery('.btn.desktop').hasClass('active')) {
// If button is active add class active to direction container
jQuery(this).parent().closest('.direction-container').addClass('active');
// If direction container has class active
if (jQuery('.direction-container').hasClass('active')) {
// Show details container
jQuery('.direction-container.active').find('.details-desktop').fadeIn(500);
// Scroll down direction container after 500ms
setTimeout(function () {
jQuery('.direction-container.active').animate({scrollTop: '100px'}, 500);
}, 500);
// Show close button
setTimeout(function () {
jQuery('.direction-container.active').parent().find('.close-details-desktop').fadeIn(500);
}, 1000);
// Hide details container
jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
jQuery('.direction-container.active').animate({scrollTop: '0px'}, 300);
setTimeout(function () {
jQuery('.details-desktop').fadeOut(300);
jQuery('.close-details-desktop').fadeOut(500);
}, 300);
setTimeout(function () {
jQuery('.direction-container, .btn.desktop').removeClass('active');
}, 500);
});
} else {
}
} else {
}
return false;
});
You are not fading them out.
jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
That only creates a click handler for an active container button. It doesn't trigger a click. Also, it should not be there somewhere deep inside another click handler, as it will only become active after a click on .btn.desktop
Your code is too complex, making it hard for yourself.
I have a clickable div that opens as you can see here
http://jsfiddle.net/Sj575/277/
My problem is that when the div's open content that is clickable appears on top of it (kind of like a gridder).
But when I click on the things on top, it does registers the image animation abut the div closes.
JQUERY (div)
$(function() {
$(".ext").click(function() {
$(".int").toggleClass("hidden");
$(".ext").toggleClass("full");
$("h1").toggleClass("hidden");
$(".pe").toggleClass("show");
});
$(".int").click(function() {
$(".ext").toggleClass("hidden");
$(".int").toggleClass("full");
$("h1").toggleClass("hidden");
$(".pi").toggleClass("show");
});
});
JQUERY(gridder)
jQuery(document).ready(function ($) {
// Call Gridder
$(".gridder").gridderExpander({
scrollOffset: 60,
scrollTo: "panel", // "panel" or "listitem"
animationSpeed: 400,
animationEasing: "easeInOutExpo",
onStart: function () {
console.log("Gridder Inititialized");
},
onExpanded: function (object) {
console.log("Gridder Expanded");
$(".carousel").carousel();
},
onChanged: function (object) {
console.log("Gridder Changed");
},
onClosed: function () {
console.log("Gridder Closed");
}
});
});
If you want a click event to only fire on the parent div, and not its descendants, try using the following comparison in your $(".ext") and $(".int") div click handlers:
if (e.target !== this)
return;
Working example whereby I've added a child button that won't cause the grow/hide animation on click: http://jsfiddle.net/zxagqwvq/
So you'd have something like:
$(function() {
$(".ext").click(function(e) {
if (e.target !== this)
return;
$(".int").toggleClass("hidden");
$(".ext").toggleClass("full");
$("h1").toggleClass("hidden");
$(".pe").toggleClass("show");
});
$(".int").click(function(e) {
if (e.target !== this)
return;
$(".ext").toggleClass("hidden");
$(".int").toggleClass("full");
$("h1").toggleClass("hidden");
$(".pi").toggleClass("show");
});
});
p {
overflow:hidden;
}
I updated the answer, hope this helps.
You can prevent a click-event from going any further, by using this:
$(".ext").click(function(event) {
...
event.stopPropagation(); //Event tree stops here. No parent elements will be notified of the event
});
please look at this fiddle http://jsfiddle.net/rabelais/4X63B/3/
In this fiddle when one hovers on the bars the animations start and stop. I want to know how to change this Jquery code so that the animation starts and stops on click instead? Also when one animation is started and the user clicks on the other bar it will pause to. At the end of each animation a refresh button is display to reset the animation.
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})
});
$('#refresh-1').click(function(){
$('.alt0').width(0);
$(this).hide();
})
$('#one').mouseleave(function(){
$('.alt0').stop()
});
Try
$('#one').on('click', function () { //when first is clicked
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active'); //remove seconds active class
if ($(this).hasClass('active')) { //check if clicked item has active class
$('.alt0').stop(); //stop animation
$(this).removeClass('active'); //remove active class
} else { //if not active or animating
$(this).addClass('active'); //add active class
$('.alt0').animate({ //start animation
width: $(this).width()
}, ($(this).width()) / 2 * 1000, "linear", function () {
$("#refresh-1").show();
});
}
});
$('#refresh-1').click(function () {
$('.alt0').width(0);
$(this).hide();
})
Similarly do the same for second bar. If you dont want another bar to stop animating on click of other bar
just remove the part from code
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active');
$('.alt0').stop(); //stop firstanimation
$('#one').removeClass('active');
Full example http://jsbin.com/UseTIji/1/
First change mouseenter to mouse click
$('#one').mouseenter(function() → $('#one').click(function()
Enter some variable that will change on every click:
var oneIsPlayed = false
$('#one').click(function() {
oneIsPlayed = !oneIsPlayed;
if ( oneIsPlayed ) {
//code to stop
} else {
//code to start animation
}
})
Breaking down the code:
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
This is the part that starts the animation when the mouse enters the element. You can change it so the animation starts on a mouse click by changing it to click:
$('#one').click(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
You can do the same with the stop animation component:
$('#one').click(function(){
$('.alt0').stop()
});
If you want to make a click on one bar stop the animation on the other, you can add a stop method call to the start animation call:
e.g.
$('#two').click(function(){
$('.alt1').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-2").show();
$('.alt0').stop();
})});
It seems that you jsfiddle isn't loading for me at the moment, so I can't test. But I hope that can get you in the right direction.
On click of that div, applying animation. Give some duration for that animation and when the duration get over you can get its callback so then remove that style.
$(document).ready(function () {
$('#service').click(function () {
$("#ServiceSublist").animate({opacity: 0.25,
left: "+=50",
height: "toggle"
}, 1000, function() {
alert("amination complete");
});
});
});
So, i have some animation actions, this is for my login panel box:
$('.top_menu_login_button').live('click', function(){
$('#login_box').animate({"margin-top": "+=320px"}, "slow");
});
$('.login_pin').live('click', function(){
$('#login_box').animate({"margin-top": "-=320px"}, "slow");
});
now i need to add some hiding action after click on body so i do this:
var mouse_is_inside = false;
$('#login_box').hover(function () {
mouse_is_inside = true;
}, function () {
mouse_is_inside = false;
});
for stop hiding this element on body click, and this for body click outside by login-box
$("body").mouseup(function () {
if (!mouse_is_inside) {
var login_box = $('#login_box');
if (login_box.css('margin-top','0')){
login_box.stop().animate({"margin-top": "-=320px"}, "slow");
}
}
});
Everything is fine but this panel animates after each body click, how to stop this and execute only one time? Depend on this panel is visible or not?
You'd normally do this sort of thing by checking if the click occured inside the element or not, not by using mousemove events to set globals :
$(document).on('click', function(e) {
if ( !$(e.target).closest('#login_box').length ) { //not inside
var login_box = $('#login_box');
if ( parseInt(login_box.css('margin-top'),10) === 0){
login_box.stop(true, true).animate({"margin-top": "-=320px"}, "slow");
}
}
});
And live() is deprecated, you should be using on().
Here's the code:
var HoverMenuOptions = {
show: function() {
$("#UserHoverMenu").css({"display": "block"});
},
hide: function() {
$("#UserHoverMenu").delay(2000).fadeOut(function() {
$(this).css({"display": "none"});
});
}
};
I want the div #UserHoverMenu to fadeOut if mouse leaves either the link triggering show() or #UserHoverMenu.
I have tried with:
$('#UserProfileName a').click(function() {
HoverMenuOptions.show();
});
$('#UserProfileName a, #UserHoverMenu').mouseleave(function() {
HoverMenuOptions.hide();
});
But hide is still triggered if mouse leaves #UserProfileName a and then into another div called #UserHoverMenu... How can I break the triggered fadeOut() when I enter #UserHoverMenu with the cursor?
$('#UserHoverMenu').mouseenter(function(e){
$(this).stop(true,true).css({"display": "block"});
});