run animation then remove element - javascript

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>

Related

jQuery css visibility not working within load method?

I'm trying to get a script so that when this div #events is clicked the content currently in #meet div changes it's visibility to hidden (so that space is preserved) and then using jquery load method, the content in v2.html is loaded into the #meet div. However, right now the #meet div disappears but the new content does not appear. Any ideas why?
HTML:
<div id="meet">
........
<div id="exec"></div>
........
</div>
JS:
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden', function() {
$('#meet').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
})
})
});
});
.css doesn't take a function as a third parameter. It does take a function as a second parameter with only a propertyName as the first: api.jquery.com/css. Try removing that function call and moving $('#meet').load() to just below the first .css call.
You can chain the .css and .load functions as well.
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
});
});
});
use CSS class instead in JQuery : addClass("foo") which contains the style you want and removeClass("boo") which contains the style you don't want.
look at this fiddle jsfiddle.net
$("#navigation").on("click", function(){
if($(this).hasClass("foo")){
$(this).removeClass("foo");
$(this).addClass("boo");
$(this).animate({width: 100}, 350);
} else {
$(this).removeClass("boo");
$(this).addClass("foo");
$(this).animate({width: 100}, 350);
}
});

Jquery On element load from external script

In my code I have external script that adds some element to my page. This script loads async after document.ready:
<script src="http://any.com/script.js"></script>
This script contains next:
$.ajax({
url: '/anyScript',
complete: function(){
alert('yo'); // FIRED
$('body').append('<div id="xxx" />'); // FIRED
}
});
I need to wait until this element will appear and add some styles to it
$(function(){
$('body').on('load','#xxx', function(){
$(this).css({
background:'red',
width: 100,
height: $('#first_el').height()
});
});
});
This doesn't fire. What to do?
UPDATED: http://jsfiddle.net/81ucdoLo/1/
This solution is based on the assumption that you don't have any control over the external script. So the proposed solution is to use an interval based solution to check whether the target element is loaded if so style it and then stop the interval.
In that case, try use $.getScript() to load the script like
jQuery.getScript('http://any.com/script.js', function () {
var interval = setInterval(function () {
var $el = $('#xxx');
if ($el.length) {
clearInterval(interval);
$el.css({
background: 'red',
width: 100,
height: $('#first_el').height()
});
}
}, 500);
})
Demo: Fiddle
You can try using ajaxComplete as shown :
$( document ).ajaxComplete(function() {
$('#xxx').css({
background:'red',
width: 100,
height: $('#first_el').height()
});
});
Working Demo
This should wait for the element to be ready:
$(function(){
$("#xxx").css('top','123px');
//OR
$("#xxx").addClass('topMargin');
});
Do somthing like this, call your js function using window.onload, it will execute doSomthing function after your page load.
window.onload = function() {doSomthing();}
function doSomthing()
{
$("#xxx").css('top','123px');
}
Or add timeout,
setTimeout(doSomthing,1000);
this will delay the call process, and will call after specified time.
What if you try this :
JSFiddle Demo:
I updated your demo.

Step option is not fired in toggle method

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/

Javascript text slider fadeout

i got some script from question Jquery Text Slider Loop
then i configure it myself ,this myscript
function showHeading(){
$('#ik'+(heading_cur+1)).css({'opacity' : '0','display' : 'block'}).animate({opacity: 1.0,left: '25px'}, 1000);
setTimeout(hideHeading, 5000);
}
function hideHeading(){
$('#ik'+(heading_cur+1)).css({'opacity' : '1','display' : 'none'}).animate({opacity: 0,left: '0px'}, 1000,function(){showHeading();});
heading_cur=(heading_cur+1)%$jIk;
}
i add display:none in hideHeading function but i want it disappear with transiton
Add it in the call back
function hideHeading(){
$('#ik'+(heading_cur+1))
.css({'opacity' : '1'})
.animate({opacity: 0,left: '0px'}, 1000
,function(){ $(this).hide(); showHeading();});
heading_cur=(heading_cur+1)%$jIk;
}
Then you can use .show() and .hide() instead of using display properties.

.is(":animated") selector returns true during animation and twice called

I'm facing a problem in jquery :animated selector, i use the callback function inside the jquery animate function to call ajax page after animation done but the problem : the calling page via ajax is called double times !
$('#elemId').click(function(){
$('html,body').animate({scrollTop: $('#sections_display').offset().top-100}, 500, function(){
$('#sections_display').load('page.php');
});
});
The result "page.php is loaded twice times ! in firebug".
So i tried:
$('#elemId').click(function(){
$('html,body').animate({scrollTop: $('#sections_display').offset().top-100}, 500);
});
if ($('html,body').is(":animated")) {
$('#sections_display').load('page.php');
}
The problem is if ($('html,body').is(":animated")) always return true during animation of the page but i want to return true after animation finished.
Also i tried :
$('#elemId').click(function(){
$('html,body').animate({scrollTop: $('#sections_display').offset().top-100}, 500, function(){
if ($(this).is(":animated")) {
$('#sections_display').load('page.php');
}
});
});
The result "page.php is loaded twice times".
The result "page.php is loaded twice times ! in firebug".
That's because you're attaching the event to both html and body. Try just html:
$('#elemId').click(function(){
$('html').animate({scrollTop: $('#sections_display').offset().top-100}, 500, function(){
$('#sections_display').load('page.php');
});
});

Categories

Resources