Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'd like to remove an id from an image after its animation is completed. I have this in my code:
if(index == 1 && direction =='down'){
$('#slidetext1 #rock').animate({right:"0"});
$('#slidetext1 #deer').animate({left: "0"}).addClass('open').removeAttr('id');
}
It's not working because it removes the id before even starting the animation, but what I want to do is to remove the id #deer from the image and add ('open') after the .animate() has been executed.
so here i made a jsfiddle: http://jsfiddle.net/67oe1jvn/45/ . pay attection to the left image as you scroll down under the HELLO h1. the thing i want to achive is: when i get to the second section, i'd like to see both of the images slide in the view with the directive "transition:all 1.2s ease-out;" AND whenever the section gets changed make them slide out of the view with a faster transiction, so it won't been noticed that much.
First of all, as pointed out in the comments, you don't want to remove the id attribute of a DOM element, that's bad practice. Rather, add and remove a specific class, for example. (your code works almost the same if you change #deer to .deer)
As for doing this when the animation is done: see the jQuery docs on animate, in its second, options param it actually accepts a callback to run when the animation is over:
Complete Function:
If supplied, the complete callback function is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole.
Which means you can write something like:
$('#slidetext1 .deer').animate({left: "0"}, {complete: function(){
this.removeClass('deer');
}})
Note: it's doubtful whether this is the best way to structure your animation, I'm just answering the original question you had: how to do something after the animation has finished.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I'm stuck with the DOM. When the search button is pressed, JS script will inject element1, and there is a new function (A) that appears after injecting element1.
I changed the class name on element1 to element2. When I want to run function(A) a bug occurs, which function(A) still indexes element1, not element2. How can I fix it?
$('.search').click(function() {
$('button').after('<div class="a b">New div element here!</div>')
// in actual this code will run by click button and this code working
$(this).siblings().last().toggleClass("b")
// this code is not triggered, it should be triggered
$('.a:not(.b)').click(function() {
console.log('clickety click');
})
})
.b {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="search">search</button>
When you bind the events, they stay bound until they are unbound from the element. So if you want to "clean" your event bindings, you can use jQuery unbind() before binding new events:
$('your.selector').unbind().click(...
Another workaround is performing a class check inside the click function callback, to be sure if the element still has (or still hasn't) some class. Just be sure if you need or not to call some kind of preventDefault() to get a better control because button element does have a default behavior.
$('.a').click(function () {
if ( ! $(this).hasClass('b') ){
// Do things with .a elements that don't have .b class
}
})
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm putting together a Loch Ness Monster website.
I have two images of Nessie that I've been trying to slide onto the screen from the left and right side at random intervals without having to be prompted by the user.
In details, the images are supposed to:
slide on the screen from the left hand side, then slide off, and then
slide on from the right hand side, then slide off.
both on random intervals.
I realize I need to probably be using the .animate function, math.random, and possibly .toggle but I'm very new to JavaScript and jQuery and have no idea how to piece the code together.
If anyone could help me I'd be extremely thankful !
$(function() {
});
function animateNessie() {
var randomTime = // use Math.random to update randomTime var for its next use
setTimeout(function() { // animate Nessie graphic (see jQuery.animate)
$().animate({
left: '50px'
});
//hide Nessie graphic
//call function again
animateNessie();
}, randomTime);
}
(Someone in my class tried to put together a loose outline, but they weren't really sure either.
I'd rather not use bootstrap because of having to go through the process of downloading it,
plus I'm not really good with it yet)
What you're thinking of is a carousel. It's easier to use Bootstrap for this, but I do know of a natural jQuery solution. I thought this might be helpful.
You'll want to use setInterval but pass in random values for this. Let's say for example, you wanted the intervals to randomly be between 1 and 10 seconds.
var randomTime = Math.floor(Math.random() * 9000) + 1000;
This will select a random number between 1000 and 10000, which will be passed into the second parameter of setInterval. This measures the number of miliseconds it will take for your code to run.
You then need to get your images. Assuming you only have two images, you would use this code.
var image1 = $("img:eq(0)"); // Selects your first image
var image2 = $("img:eq(1)"); // Selects your second image
Hide the second image with the hide() method.
image2.hide();
To run a function continuously, we use setInterval. Since we want to alternate, we just call the toggle() method which checks if an image is hidden or not.
setInterval(function() {
$("img").toggle();
}, randomTime);
Here's a fiddle
http://jsfiddle.net/sx3fnpuy/1/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For some strange reason this simple click function I've added, which should be adding the 'big' class to the clicked divs, is only working for every other div.
See an example here (click the square boxes with images)
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Here is a fiddle but I chose not to post this as it works fine as it should do. The error is caused by some other element but I don't know what
http://jsfiddle.net/Ly1bxswq/1/
You binding your click handler within a loop, but need to do it only once when all elements added to page.
$.each(data.feed.entry, function (i, entry) {
// ...
$container.append(item);
// ...
})
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
}
As pointed out by #Yan Brunet's comment, it would be much better to delegate the event from every .box to their parent. That way you can bind your handler at any point (even before .box elements are added to page)
$container.on("click", ".box", function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
I want to have a page turn effect like the one seen on this page: jFlip demo except I want to automate the page turning, like make it happen every second, 20 times (or however many images I have). I want to be able to trigger this animation to run either on page load, when a button is clicked, etc.
Unfortunately I don't understand jQuery all that well and the plugin's events seem rather complicated to me, probably mostly due to my inexperience with jQuery. Any help on which direction I should go, methods I should try? I am not limiting myself to jQuery or even Javascript, this is just the example I have found that achieves my desired effect.
You can find the updated code here. replace this with old one.
Usage :
var jFlip = new Flip("#g1",300,300,{background:"green",cornersTop:true,scale:"fit"});
// here #g1 is a jquery selector (make sure it returns only one).
// The structure is Flip(JQselector,width,height,options)
then use the jFlip object to flip slides/pages
jFlip.flipMe() // for next slide
jFlip.flipMe(true) // for prev slide
for binding a function to slide change event you can use
$("#g1").bind("flip.jflip",function(event,index,total){
$("#l1").html("Image "+(index+1)+" of "+total);
});
// here the selector is same as the one passed inside jFlip function.
Try this and let me know the feedback.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have four columns that I want to toggle on hover.
Each column will have default content (visible when the page loads)
and content that will only show when the mouse hovers over the column.
I want the on-hover content to show with a smooth toggle effect (sliding down)
Just to make sure we're on the right track, I don't need to know how to do this.
I know how, what I need to know is the "best" way to do this.
You will have to work with the "onmouseover" and "onmouseout" events.
JavaScript:
document.getElementById('IDOfTheElement').onmouseover = function() {
// Whatever your hover code goes here
document.getElementById('IDOfElementYouWantToShow').style.display = "block";
});
document.getElementById('IDOfTheElement').onmouseout = function() {
// Exit hover code goes here
document.getElementById('IDOfElementYouWantToHide').style.display = "none";
});
jQuery has a nice way of dealing with this:
$('#IDOfTheElement').on('mouseover', function() {
// Whatever your hover code goes here
$('#IDOfElementYouWantToShow').show();
// Or you can
$('#IDOfElementYouWantToShow').fadeIn("slow", function() {
alert('Fading in!');
});
});
$('#IDOfTheElement').on('mouseout', function() {
// Exit hover code goes here
$('#IDOfElementYouWantToHide').hide();
// Or you can
$('#IDOfElementYouWantToShow').fadeOut("slow", function() {
alert('Fading out!');
});
});
Note that some browsers may have issues with show() and hide(), so you may need to use document.getElementById('ID').style.display = 'block'; or document.getElementById('ID').style.display = 'none';.
According to the tag you picked for your question, following is a good solution that olny requires JQuery (no CSS is involved). It's actually pretty easy using the hover() and toggle() functions.
$('tbody.restricted').hide();
$('table').hover(function() {
$(this).find('tbody.restricted').slideToggle("slow");
});
There's a little more complex challenge that is introduced by your will to animate multiple rows as a block. A solution I find suitable for that purpose is to encapsulate (dynamically or not) the rows you want to animate as a whole within a tbody that will be displayed as a block with CSS.
tbody {
display:block;
}
N.B.I went that way because of the usage of a table (columns was mentionned), but you could always design this solution without using tables and only markups displayed as blocks (div by default). This wouldn't require the previous CSS alteration.
See this fully functional JSFiddle
Don't want to just copy some other code, i think this jsfiddle link would solve your problem nicely.
http://jsfiddle.net/NKC2j/2/
$("#menu").hover(function(){
$('.flyout').slideToggle();
});
For performance you would need to toggle a CSS class, otherwise you will need to traverse your DOM a few times to show/hide elements
This is the original post: https://stackoverflow.com/a/11114735/1231079