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
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
Background:
I am using the materialize JS to create collapsible divs. When a div that has a class of collapsible-header is clicked, a slide down animation occurs on the sibling div that has a class of collapsible-body, showing the contents of the collapsible-body.
What I am trying to accomplish is when a collapsible header is clicked, the browser should scroll to the top of that div so that the contents are in full view of the user. I have used an on click event, which works fine on the first collapsible. But then, if you have an open collapsible and you click on another to open it, it doesn't scroll to the top of the clicked div properly (it will scroll to the middle of the body, or way above the top of the div).
JS Fiddle of on click functionality: https://jsfiddle.net/f83dct8f/4/
I am able to accomplish what I am looking to do by editing the Materialize JS itself. Here is how the line looks before my edit:
object.siblings('.collapsible-body').stop(true, false).slideDown({
duration: 350,
easing: "easeOutQuart",
queue: false,
complete: function() {
$(this).css('height', '');
}
});
I add the following to the complete portion of the above statement to accomplish what I'm looking for:
$('body').animate({scrollTop: $('.collapsible-header.active').offset().top },'slow');
Question: I do not want to edit the Materialize 3rd party code to accomplish what I need, so I need to find a way to implement the body animate code after the slide down is finished, without editing the Materialize animation. I know there has to be a way to do it?
I have tried event queues on the collapsible body, which seemed promising, but my test console print executed during the animation. See below. If someone could point me in the right direction of what else I could try, I would greatly appreciate it.
$('.collapsible-header.active')
.siblings('.collapsible-body').slideDown().queue(function(){
console.log('DONE');
});
You should be able to use the onOpen option when initialising your .collapsible. Pass in a function to execute when the accordion is opened. The function receives the element as a argument.
$(document).ready(function() {
$('.collapsible').collapsible({
onOpen: function(el) {
$('body').animate({scrollTop: el.offset().top },'slow');
}
});
});
Link: https://jsfiddle.net/nbonne/9hcoy9j8/
I aim is to have the medium blue box and everything in it move up when the search button is pressed.
I know my selector is for "form" and it's trying to change the background, I'm having trouble getting anything to animate.
I think this is the correct way to accomplish it but nothing happens:
$("#search-btn").click(function{
$("controls-main").animate({
background: "red"
}, 500);
})
In the fiddle:
Second click handler was missing parentheses (syntax error in console)
s-form class was missing from your form html code (empty selector)
$('search') is a wrong selector. You probably wanted $('[name=search]');
You are animating background, which jQuery's animate doesn't animate.
Updated working fiddle: https://jsfiddle.net/9hcoy9j8/18/
$(document).ready(function() {
$(".rand-wiki").click(function() {
window.open("https://en.wikipedia.org/wiki/Special:Random");
});
$(".s-form").on('click', function () {
$("[name=search]").animate({
marginTop: '40px'
}, 500);
});
});
jQuery on its own can't animate colors. You need another library like jQuery UI. See this SO answer for more information.
I have a button, and what I have is when you click on it, and new element "drops" in. So what I want to do is when you press it again it goes back. As essentially fades out. Here's what I have so far \
$(".icon-search").click(function(){
$(".search").css('height', '100px')
});
When you click on the icon, the black shape goes to 100px. And what I want to do, is get rid of it, by clicking on it again. I've seen other stuff online, but none seemed to work.
Here's a demo http://jsfiddle.net/PHX3A/
JSFiddle
.toggleClass() will do the trick for you.
.toggleClass() :
Add or remove one or more classes from each element in the set of
matched elements, depending on either the class's presence or the
value of the switch argument.
JavaScript :
$(".icon-search").click(function(){
$(".search").toggleClass("doHeight");
});
CSS :
.doHeight{
height:100px;
}
for further information in using .toggleClass() click here
2nd Option :
JSFiddle
using .toggle() reference : toggle
JS :
$( "div" ).click(function() {
$( ".search" ).toggle( "slow" );
});
Use toggleClass function to set the CSS. In this example, I added CSS to the toggle class
Try this:
JQuery:
$(".icon-search").click(function(){
$(".search").toggleClass('toggle')
});
CSS:
.toggle{
height:100px;
}
JSFiddle Demo
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.