I can't seem to make the jQueryUI explode effect work. Here's a jsfiddle I tried. Usually when I try the element hides with no explosion effect whatsoever, the jsfiddle just looks strange exploding.
$('h1, h2').click(function() {
$(this).hide('explode');
});
The jQueryUI docs on the explode effect are not very clear on how to use it.
Am I doing something wrong?
You can fix it by putting more text. Here is a jsfiddle https://jsfiddle.net/k380zpgx/. By the way use this code instead it gives you more control of the effect.
$('h1, h2').click(function() {
$(this).hide( "explode", {pieces: 16 }, 2000);
});
Related
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 just came across animate.css yesterday and wanted to apply it to my website.
But the problem was it only worked once, no matter how many times I hovered over the div it stays the same! Maybe I didn't quite grasp the coding technique properly. Here is my code:
window.setTimeout( function(){
$('#test').removeClass('animated bounce')},
1300);
$(function(){
$('#test').hover(function(){
$('#test').addClass('animated bounce');
});
});
Appreciate all the suggestions !
try this
$('#test').hover(function(){
$(this).addClass('animated bounce');
}, function(){
$(this).removeClass('animated-bounce');
});
or even better
$('#test').hover(function(){
$(this).addClass('animated-bounce');
});
var element = document.getElementById('test');
element.addEventListener("webkitAnimationEnd", function(){
$(element).removeClass('animated-bounce');
}, false);
Actually.
Why don't use just do it with css
#test:hover{
animation: animateName ....;
}
The problem your having is that when you add the class the animation works but when you hover a second time it doesn't add the class again because it is already there so CSS doesn't know when you have hovered it without a change in class name.
Link to Animation Event DOCS
AnimationEnd Demo
CSS :hover Demo
I would like this div to slide up to be hidden and I can figure out how to do that. The way it is set up now is when I click on #aboutclick and #contactclick then .thumb just disapears. I would like for it to slide up and disappear.
Does anyone know how to do this?
$(document).ready(function(){
$(".thumb").hide();
$("#aboutclick, #contactclick").show();
$("#aboutclick, #contactclick").click(function(){
$(".thumb").hide();
});
});
http://dl.dropbox.com/u/14080718/Final/UITabs15.html
use jQuery's slideUp() function for that. It also takes time.
The name of this function exactly describes what you want to do, to slide up the object, and to hide it (because its height would become zero). There is also another function called slideDown() which does the opposite, and matches this animation. Also, another function named slideToggle() also might become more handy, when you already don't know that current state of your object, and only want to toggle it.
$(document).ready(function () {
$(".thumb").hide();
$("#aboutclick, #contactclick").show();
$("#aboutclick, #contactclick").click(function () {
$(".thumb").hide(1000);
});
});
you could animate for this feature. like this,
$(".thumb").animate({height:0,opacity:0},1000,function(){$(".thumb").hide()})
Use .toggle() and then .hide();
I'm wondering how i can fadeout a class element in jQuery. I've got a list of div's and all of them got the same class name. So, if i click on of them, all fades out. How can i make it so just the one I'm clicking is fading out?
$(document).ready(function() {
$('.imageWrap').click(function() {
$(this).fadeOut();
}
});
I've been checking the jquery docs but i can't find any solutions too this. I know it's a basic question but i hope someone can help me out. Thanks!
This will work as you expect it but you have a typo:
$(document).ready(function() {
$('.imageWrap').click(function() {
$(this).fadeOut();
}); // < - missing parathesis and semicolon
});
jsFiddle: http://jsfiddle.net/NTtqx/
That code you have above should be fading just the image you click on out, he $(this) part selects just the image that has been clicked on and then fades it out, your issue is the typo, you've got a missing ):
$('.imageWrap').click(function() {
$(this).fadeOut();
}) //ADD THE CLOSING BRACKET HERE
I've pretty much copied your code line for line in this JSFiddle and as you can see when you click on one div just that div fades out: http://jsfiddle.net/SMtuG/, so it's clearly just the typo causing this issue.
You forgot to close 'click' event with '});':
$(document).ready(function() {
$('.imageWrap').click(function() {
$(this).fadeOut();
});
});
The below code works but on mouse enter causes flicker
$("#helptext").bind("mouseenter",function(){
$("p:first",this).text("helptext.");
}).bind("mouseleave",function(){
$("p:first",this).text("");
});
The below code does not work
/*
$("helptext").mouseout(function(){
$("p:first",this).text("sdlfksdlfjskldjl");
}).mouseover(function(){
$("p:first",this).text("mouse over");
});*/
I want to remove the flicker or get the second code working.
The HTML for above
<div id="helptext"><img alt="Help Text" src="/static/help.png"></img><p></p></div>
I suggest using hover() this instead of binding to mouseenter and mouseleave looks cleaner to me.
$("#helptext").hover(function(){
$("p:first",this).text("helptext text.");
}, function(){
$("p:first",this).text("");
}
);
Btw. I guess without more of your HTML/CSS code I think we can't solve this issue as the above doesn't flicker for me at all.
Check here http://jsbin.com/ihuna/
This may be kind of obvious, but isn't the piece of code that isn't working missing a # in the first line?
Seems like it should be:
$("#helptext").mouseout(function(){
$("p:first",this).text("sdlfksdlfjskldjl");
}).mouseover(function(){
$("p:first",this).text("mouse over");
});
I think it could be the issue with hover in JQuery version you are using. I am facing the issue of multiple calls for hover when the mouse enters bound element's children.
Check out the following.
http://bugs.jquery.com/ticket/5821