I am working on the code below. Why am I not able to hide the #legend
div by this way?
$("#icon").on("click",function(){
$("#legend").hide('slide', {direction: 'left'}, 1000);
});
I also tried the animation way but it didn't work either.
I think you have used the syntax wrongly.. Just try like,
$(selector).hide(speed,easing,callback);
Please refer the jQuery document here...
I have updated a fiddle here... Please check this..
Hint: Here callback is a function which is executed after the animation completes. But it is not mandatory.. you can also leave this parameter..
Updated a Fiddle here with jQuery UI animation...
You can use the animate() method for that,
$('#legend').animate({width: '0'}, 1000, function(){
$(this).hide();
});
Check the Demo.
Related
I got a div element, so when I click on it, another div which is hidden by default is sliding and showing, here is the code for the animation itself:
$('#myelement').click(function(){
$('#another-element').show("slide", { direction: "right" }, 1000);
});
How can I make that so when I click on the #myelement one more time (when the element is showed already) it will hide the #another-element like this:
$('#another-element').hide("slide", { direction: "right" }, 1000);?
So basicly, it should work exactly like a slideToggle but with the show/hide functions. Is that possible?
The toggle-event is deprecated in version 1.8, and removed in version 1.9
Try this...
$('#myelement').toggle(
function () {
$('#another-element').show("slide", {
direction: "right"
}, 1000);
},
function () {
$('#another-element').hide("slide", {
direction: "right"
}, 1000);
});
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, jQuery docs.
The .toggle() method is provided for convenience. It is relatively
straightforward to implement the same behavior by hand, and this can
be necessary if the assumptions built into .toggle() prove limiting.
For example, .toggle() is not guaranteed to work correctly if applied
twice to the same element. Since .toggle() internally uses a click
handler to do its work, we must unbind click to remove a behavior
attached with .toggle(), so other click handlers can be caught in the
crossfire. The implementation also calls .preventDefault() on the
event, so links will not be followed and buttons will not be clicked
if .toggle() has been called on the element, jQuery docs
You toggle between visibility using show and hide with click. You can put condition on visibility if element is visible then hide else show it. Note you will need jQuery UI to use addition effects with show / hide like direction.
Live Demo
$( "#myelement" ).click(function() {
if($('#another-element:visible').length)
$('#another-element').hide("slide", { direction: "right" }, 1000);
else
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Or, simply use toggle instead of click. By using toggle you wont need a condition (if-else) statement. as suggested by T.J.Crowder.
Live Demo
$( "#myelement" ).click(function() {
$('#another-element').toggle("slide", { direction: "right" }, 1000);
});
Make use of jquery toggle function which do the task for you
.toggle() - Display or hide the matched elements.
$('#myelement').click(function(){
$('#another-element').toggle('slow');
});
this will work for u
$("#button-name").click(function(){
$('#toggle-id').slideToggle('slow');
});
You can use this code for toggle your element
var ele = jQuery("yourelementid");
ele.slideToggle('slow');
this will work for you :)
You can use .toggle() function instead of .click()....
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script> <script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
$(document).ready( function(){
$("button").click(function(){
$("p").toggle(1000,'linear');
});
});
Live Demo
I'm using the scrollTo plugin by Ariel Flesler to scroll to an element. However this piece of code just doesn't run on Firefox (v 61).
$(document).ready(function(){
$('html, body').scrollTo(document.getElementById('login-link'), 800);
});
Here's a demo: https://jsfiddle.net/1n26s3dm/1/
Any idea what am I doing wrong?
Add the following code and make sure you have jQuery installed, because on your fiddle there isn't jquery
$('html, body').animate({
scrollTop: $("#login-link").offset().top
}, 800, function(){
// this is the callback after the animation is done
// you can emit events here
$("#login-link").trigger('click');
});
Your example on jsfiddle doesn't work. If you need jQuery you should select this library in JS window. Do not use Resources for include jQuery.
Try my example
Also try do not mix jQuery and Vanilla.js to work with DOM. Would be better if you change your code like this:
$(document).ready(function(){
$('html, body').scrollTo($('#login-link'), 800);
});
I've got this piece, which I want to animate the div going down and up while still showing part of the content. See working at this fiddle.
$('button').click(function(){
$('.wrap').animate().css({
'overflow-y' : 'visible',
'max-height' : 'initial'
});
});
Your animation statement appears to be incorrect. The code below should get you started. Also see the examples in the jQuery API documentation.
$('button').click(function(){
$('.wrap').animate({ maxHeight: '400px' }, 3000 );
});
Yet, if you want to slide up and down on the button click then the jQuery toggle method might work better for you. See jQuery toggle
Here's the fiddle for the below.
The reason for creating this jsfiddle is that animate() doesn't work inside the fadeOut() function, but works outside :
$(".fader").click(function (e) {
var self = this;
$('.fader').not(self).fadeOut(function () {
$(self).animate({top: "220",left: "200"}); // doesn't work
LoadContent(fader.attr('id')); // works
});
$(this).animate({top: "220", left: "200"}); // works
});
EDIT: ok I see the reason now that animate() didn't run - I was calling the wrong element (this instead of self which jsfiddle corrected). but still I don't know why toggle() doesn't work in jsfiddle.
Your jsFiddle is wrong. First of all You don't use any jQuery library, as the file you are refering to in first line does not exist. Second is that You are trying to apply click event to object with class .fader but not the one that was clicked. And there is no other object with that class. Use parents() instead. And function (as u call) "inside" fadeOut is triggered at the end of fadeOut so your code is kind of senseless.
If you want to animate and fadeout at same time, use only animate:
$('.fader').animate({ opacity: 0, top: "-1000px", left: "-1000px" }, 'slow');
I've got a button(#nav-button) that increases an elements height. But I want the same button to also decrease the height when pressed again. The code:
$(document).ready(function(){
$('.nav-button-open').click(function(){
$('.nav-bar').animate({height:'90px'}, 500);
$("#nav-button").attr('class', 'nav-button-close');
});
$('.nav-button-close').click(function(){
$('.nav-bar').animate({height:'10px'}, 500);
$("#nav-button").attr('class', 'nav-button-open');
});
});
Fiddle: http://jsfiddle.net/mdecler/e4XED/
The jQuery increases the height fine but I cannot decrease the height when I press the button again! What am I doing wrong?
Thx for your help!
Consider changing your jQuery code to:
$(document).ready(function(){
$('#nav-button').click(function(){
if($(this).hasClass("nav-button-open")){
$('.nav-bar').animate({height:'90px'}, 500);
$("#nav-button").attr('class', 'nav-button-close');}
else{
$('.nav-bar').animate({height:'10px'}, 500);
$("#nav-button").attr('class', 'nav-button-open');
}
});
});
DEMO LINK:
http://jsfiddle.net/e4XED/4/
As I think, you should use
.live('click', ...), because you change your buttons' classes dynamicly, but set click event only at start. Correct jsfiddle.
The nav-button-close class does not exist when the jQuery script is loaded. Use on.
See this jsFiddle
Note: don't use live, it's deprecated.
Like aleksey said, use live. Or you can just add a class and check to see if it exists.
like:
$('.nav-button').click(function(){
if($(this).hasClass('open')){
$('.nav-bar').animate({height:'10px'}, 500);
$(this).removeClass('open').addClass('close');
}else{
$('.nav-bar').animate({height:'90px'}, 500);
$(this).removeClass('close').addClass('open');
}1
});