I was trying to create a sliding menu, using toggle() method but needed to call a function (that was interacting with div height) while sliding into view. for this, I've used the step option (as seen in documentation) to call this function has soon has sliding starts to occur. I did many tests, and it seems that this option is not working with toggle().
I've tried to use animate() with the same call and its working perfectly...?
I've made a simple fiddle here ( JSFiddle ) to illustrate the problem.
I've tried it in the last version of IE and Chrome with version 1.11.0 of jQuery
// This is for toggle method
$(document).on("click", "#toggle", function(){
$("#menu").toggle({effect: "slide", direction: "left", width: "show", step: function(){
if ($("#menu").hasClass("open")){ //***** THIS IS NEVER EXECUTED
$("#menu").removeClass("open");
$(this).css("background-color", "red");
} else{
$("#menu").addClass("open");
$("#menu").css("background-color", "green");
}
}
}) ;
});
Your code in the fiddle is not correctly enclosed in parens (step is in another couple of {}); so the option are not passed correctly to the toggle function.
Code:
// This is for toggle method
$(document).on("click", "#toggle", function(){
$("#menu").toggle({effect: "slide", direction: "left", width: "show", step: function(){
if ($("#menu").hasClass("open")){ //***** THIS IS NEVER EXECUTED
$("#menu").removeClass("open");
$(this).css("background-color", "red");
} else{
$("#menu").addClass("open");
$("#menu").css("background-color", "green");
}
}
}) ;
});
Demo: http://jsfiddle.net/IrvinDominin/QzyEU/
Related
I am busy working on a timeline, the basic left right function of it works
the current issue I am having is that the hover function moves the timeline further than I need. I had an idea to stop the animation when the last li (#last) is visible and vise versa when the first li (#first) is visible. I think that my implementation of the jQuery might be wrong and would appreciate your assistance please. See below a JSFIDDLE and the jQuery code.
JSFIDDLE: http://jsfiddle.net/Jason1975/6nwkd2c8/84/
$(document).ready(function(){
if ($("li#last:visible")) {
stop();
} else {
$("a#next").click(function () {
$("#new").animate({
"left": "-=100px"
}, 200);
});
}
if ($("li#first:visible")) {
stop();
} else {
$("a#prev").hover(function () {
$("#new").animate({
"left": "+=100px"
}, 200);
});
}
});
There were a few things I had to change. First was your markup never had a positioning that was able to be moved. So I added position:relative; to #new.
<ul id="new" style="width: 1025px; position:relative;">
Note I also removed the translate property as you were using jQuery's animate, and translate is for CSS3 animations.
I also changed the hover functions to this:
var containerWidth = $('#container').width();
$('a#next').hover(function(){
$("#new").animate({
"left": -Math.abs(containerWidth) - 150
}, 1000);
}, function(){
$("#new").stop();
});
$('a#prev').hover(function(){
$("#new").animate({
"left": 50
}, 1000);
}, function(){
$("#new").stop();
});
And added it inside your document.ready function. I hope this helps!
Here is a working DEMO.
I am tring to run a simple animation then remove the div since it lies over some buttons so you can not click them after the animation.
JS
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000 );
I tried doing this to remove the element after the animation but it removes it before.
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000 ).remove();
Remove in animate function's callback:
$(".intro").eq(0).delay(800).animate({opacity: 0}, 1000, function() {
$(this).remove()
});
Alternatively, add complete function in option object:
$(".intro").eq(0).delay(800).animate({opacity: 0}, {duration: 1000, complete: function() {$(this).remove();}});
You can add more options to it, easing for example. Check the API doc
You can use complete callback to call once the animation is complete :
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000, function() {
$(this).remove();
});
Working Demo
Use the complete callback
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000, function() { $(this).remove(); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="intro">Hello</div>
I'm having some issues with the jQuery delay() function.
I'm currently using it to try and force a toggleClass action to wait until the slideUp animation has completed on one of my divs however it doesn't appear to be working.
My style aims at having a bar with rounded corners that when clicked expands to reveal further content with the round corners of the bar at bottom becoming squared so as to look as though the bar has actually expanded to reveal the content. This is fine and it works however, when I collapse the expansion, the bar needs to go back to having rounded corners at the bottom after the collapse animation has completed. At the moment it seems to fire before this animation has completed.
I read somewhere online that the jQuery 'slow' speed of transition is 600 milliseconds to I set the delay to 800 to make sure it is out of the way but again this hasn't actually done anything.
Any suggestions? Code and fiddle below:
$(function() {
$('span.history_record_toggle').click(function () {
if($(this).hasClass('collapsed')){
$(this).text('Show +');
$(this).toggleClass('collapsed');
$(this)
.closest('.history_record_container')
.find('.history_record_body')
.slideUp('slow',function() {
});
$(this)
.parent()
.toggleClass('squared_bottom');
}else{
$(this).text('Hide -');
$(this).toggleClass('collapsed');
$(this)
.closest('.history_record_container')
.find('.history_record_body')
.slideDown('slow',function() {
});
$(this)
.parent()
.delay(800)
.toggleClass('squared_bottom');
};
});
});
http://jsfiddle.net/jezzipin/KFeHd/6/
jQuery animations and effects have callback functions for what you want to happen after it finishes.
E.g.
var thisParent = $(this).parent();
$(this).closest('.history_record_container').find('.history_record_body').slideDown('slow',function() {
$(thisParent).toggleClass('squared_bottom');
});
Try this: Fiddle here
$(function() {
$('span.history_record_toggle').click(function () {
$zis = $(this);
if($zis.hasClass('collapsed')){
$zis.text('Show +')
.removeClass('collapsed')
.closest('.history_record_container')
.find('.history_record_body')
.slideUp('slow',function() {
$zis.parent().removeClass('squared_bottom');
});
$zis.parent().addClass('squared_bottom');
}else{
$zis.text('Hide -')
.addClass('collapsed')
.closest('.history_record_container')
.find('.history_record_body')
.slideDown('slow',function() {
});
$zis.parent().addClass('squared_bottom');
};
});
});
I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.
Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.
Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});
I'm pretty new to jQuery (and javascript for that matter), so this is probably just something stupid I'm doing, but it's really annoying me!
All I'm trying to do is add a speed to jQuery's hide and show functions. The code I'm using is:
for (var i in clouds) {
$(clouds[i]).click(function() {
$(this).hide();
});
}
to hide clouds when they're clicked on, and
function fadeLogo(state) {
var element=document.getElementById('logo');
if (state=='home') {
element.hide;
element.src='images/home.png';
element.show;
}
else {
element.hide;
element.src='images/webNameLogo.png';
element.show;
}
}
to hide an image, change it and then show it again. This is called by
onMouseOver=fadeLogo('home') onMouseOut=fadeLogo('logo')
This works fine, but happens instantaneously. Whenever I try to include a speed, either as 'slow', 'fast' or in milliseconds, it won't work, they just stay in their original states. Even adding hide() without a speed throws up an error in Safari's error console:
TypeError: Result of expression 'element.hide' [undefined] is not a function.
No errors are reported for the clouds, they just sit there not doing anything!
Hope someone can help!
Thanks
EDIT:
Now have this for the image change:
$(function() { //This function fades the logo to the home button on mouseover
$('.logo').hover(function() {
$(this).fadeOut(
'slow',
function () {
$(this).attr ('src','images/home.png').fadeIn('slow');
});
}, function() {
$(this).fadeOut(
'slow',
function () {
$(this).attr('src','images/webNameLogo.png').fadeIn('slow');
});
});
});
Which fades the image out and in no problem, but doesn't change between the 2 images...
Oops, should have been #logo. Got that one working now, onto the pesky clouds...
The hide() method is used like so:
for (var i in clouds) {
$(clouds[i]).click(function() {
$(this).hide( 'slow' ); // or you can pass the milliseconds
});
}
As for the image hiding you should do something like this:
$( 'selector for your image' ).hide (
'slow',
function () {
$( this ).attr ( 'src', 'images/other.png' ).show ( 'slow' );
}
);