When I click the button, I want to hide that button and show the div. I want this to be slow.For this:
$('#add_note').on('click',function (){
$(this).hide(200);
$('#add_note_form').show(200);
})
i used this.
But, I want to make this using prop('hidden',true/false).
$('#add_note').on('click',function (){
$(this).prop('hidden',true);
$('#add_note_form').prop('hidden',false);
})
It works like this but is it possible to do it slow?
You can't animate a slow transition using the boolean hidden property.
However you can use fadeOut() instead, then set the property in the callback when the animation completes:
$('#add_note').on('click',function() {
$(this).fadeOut(1000, function() {
$(this).prop('hidden', true);
});
$('#add_note_form').fadeIn(1000);
})
Related
I'm trying to use jQuery to hide and show elements on a button click. I have the following code:
$(function(){
$('#link-form').hide()
$('#link-submit').hide()
$('#main-header-submit').on("click", function() {
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
$(this).on("click", function() {
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
})
})
})
This successfully shows and hides the divs when I click the 'main-header-submit' button, but when I click the button (effectively for a third time) to make the elements show again nothing happens. Any help much appreciated.
If you rewrite your code like this, it should work:
$(function(){
$('#main-header-submit').on("click", function() {
$('#link-form').toggle("fast");
})
})
The toggle function hides the elements if they are shown and shows them if they are hidden. Check here http://api.jquery.com/toggle/
The issue is because you're attaching another click handler on each successive click. The first shows the link-form, while the second hides it. This is why you never see any change.
From what I can see of your code, to achieve what you require you simply need to use toggle() and fadeTo() with a ternary instead. Try this:
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeTo("fast", $('#main-yield').css('opacity') == '1' ? 0.2 : 1);
});
Working example
Essentially, using $("selector").on('click', function() { ... }); will run the ... on the click event for that element.
Inside the ... function definition, you're overwriting the .on('click') by another function.
So in other words, the first time you click, you're telling the code to show your element, then rebind the click to hide. So every subsequent click will hide the already hidden element.
What you need to do is to something like this:
$('#main-header-submit').on("click", function() {
if ($(this).is(":visible")){
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
}
else{
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
}
});
use toggle() and fadeToggle
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeToggle("fast")
})
this is the code: code on jsfiddle. On the first run it doesn't show the "slideDown" animation but subsequent times it works fine.
$("#more-news") .click(function() {
$(".news-hide") .slideDown('slow').removeClass("hide");
});
Use the following.
$("#more-news").click(function() {
//changed the line below.
$(".news-hide").hide().removeClass('hide').slideDown('slow');
$("#less-news").fadeIn('slow').removeClass("hide");
$("#more-news").fadeOut().addClass("hide");
});
DEMO
Instead of using multiple elements and multiple events, you can use like this,
$("#more-news").click(function() {
var button = $(this)
$(".news-hide").slideToggle(function() {
$(".news-hide").is(":visible") ? button.text("Less News") : button.text("More News")
});
});
Fiddle
The bootstrap hide class doesn't quite work the same way as the jQuery hide function, creating a confusing result.
To jQuerify your hidden things before sliding them around, you can do something a little like this:
$('.hide').hide().removeClass('hide');
$("#more-news") .click(function() {
$(".news-hide") .slideDown('slow');
});
Now you don't have to worry about that hide class every time you do something, but it keeps things hidden until the document is ready to javascript itself.
I'm using this code to stop simultaneous animations on 2 elements:
$('#container').find('*').stop(true, true);
The animation can be stopped by an end user hovering over a button, in which case the animation stops after completion (which is what I want). However, the button hover also initiates another function (removes and reloads the elements), and there's a conflict if that function runs before the animations are complete.
I was thinking that using 'after' or 'complete' with the above code might work, but I can't figure out what the syntax would be.
im not sure what you are trying to achieve, but in order to check whether or not there are running/pending animations on the object using jQuery, you can use .promise().done()
example, somehing of this sort:
var animations_running;
$('#container').promise().done(function() {
animations_running=false;
});
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
//...do animations...
animations_running=true;
}
});
you can also add a callback function to your jQuery animations as follows:
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
$(this).animate({
left:+=50
},500,function(){
//...this is the callback function...
});
animations_running=true;
}
});
i am trying to make the value of a button change when hovering, but then change back on mouse off.
To change the value this does work:
$(".followbuttony").hover(function () {
$(".followbuttony").toggle('value', 'Unfollow');
});
But of course it stays that value. The problem is that the button value is dynamically loaded in the first place so i cant just set another value on mouse off.
Any help on making this a toggle style action?
I have this jsfiddle to show:
http://jsfiddle.net/T5Vm2/
Thanks!
That's not the way to do it, you have to use both handlers in hover()
$(".followbuttony").hover(function () {
$(".followbuttony").val('Unfollow');
},function() {
$(".followbuttony").val('Following');
});
FIDDLE
Personally, I like this better
$(".followbuttony").on('mouseenter mouseleave', function(e) {
$(".followbuttony").val(e.type=='mouseenter'?'Unfollow':'Following');
});
To store the initial value, change it, and then get it back, you can do :
$(".followbuttony").on('mouseenter mouseleave', function(e) {
if (e.type=='mouseenter') {
$(this).data('val', this.value).val('Unfollow');
}else{
$(this).val($(this).data('val'));
}
});
FIDDLE
You can pass two functions to hover event like this :
$(".followbuttony").hover(function () {
$(".followbuttony").prop('value', 'Unfollow');
},function() {
$(".followbuttony").prop('value', 'Following');
});
Click here - Jsfiddle
I have a button which toggles the visibility of a <div> below it and want to modify the text on the button depending on the visibility of said <div>.
Here is a live demo on jsFiddle
If you click on "Saved Data", the first time it works correctly, but the next time you click the text does not change. This in itself is behaviour that I don't understand.
Now, I could use multiple handlers for slideToggle(), however, elsewhere in the code I also set intervals which load data next to "Cookie data:" and "Server data:". I don't want these intervals to do anything if the <div> is not visible so I use something like this:
this.timer_cookiedata = setInterval(function(){
if (!$savedData.is(':visible'))
{
return null;
}
// ..
});
I'm worried these intervals are not going to work properly because of this is(':visible') business. So the question is, why does this happen (else statement is ignored), and what can I do to mitigate this?
Check out the updated fiddle. When you check for visibility right after you call slideToggle, jQuery may not have updated the visibility of the element yet since the animation takes some time to finish. For this exact reason, slideToggle has a callback you can use to perform operations after the animation has finished:
$(function () {
var $savedData = $('#savedData');
$('#btn-savedData')
.click(function () {
var $button = jQuery(this);
//I'm checking the visibility in the callback. Inside the callback,
//I can be sure that the animation has completed and the visibility
//has been updated.
$savedData.slideToggle('fast', function () {
if ($savedData.is(':visible')) {
$button.html('visible');
} else {
$button.html('not visible');
}
});
});
});