I would to change the div css style when click, then change to it primary status when click to another.
i used this code but it just rechange it when click on another div,
here the code am trying:
$('.mydiv').click(
function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500);
}, function () {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});
You're probably looking for the toggle() function :
$('.mydiv').toggle(function() {
$(this).stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$(this).stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});
And you need jQuery UI to animate colors ?
FIDDLE
EDIT:
You're probably still looking for the toggle() function, but to animate one div when clicking on another div, stop using the this keyword and target the div you're trying to animate :
$('#someDiv').toggle(function() {
$('.mydiv').stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$('.mydiv').stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});
FIDDLE
Try this:
$('.mydiv').click(function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500, function() {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});
});
Related
I would like make a image burst to pieces, this animation should continue infinetly. Pls advice on how to proceed with this? Is it possible to use the jquery animate function to achieve this.
Try this,
http://jsfiddle.net/Dripple/AGGrv/.
This makes a fine animation of bursting a balloon.
$("#bubble1").click(function() {
$("#bubble1").stop(true, false);
$(this).hide("explode", {
pieces: 50
}, 250);
});
function animate1() {
$("#bubble1").animate({
"-moz-border-radius": "110px/100px",
"-webkit-border-radius": "110px 100px",
"border-radius": "110px/100px",
height: '100px',
width: '110px',
top: '240px'
}, 1500, animate2());
}
function animate2() {
$("#bubble1").animate({
"-moz-border-radius": "100px/110px",
"-webkit-border-radius": "100px 110px",
"border-radius": "100px/110px",
height: '110px',
width: '100px',
top: '235px'
}, 1500, function() {
$('#bubble1').trigger('mouseover');
});
}
$("#bubble1").mouseover(function() {
animate1();
});
$("#bubble1").mouseout(function() {
$("#bubble1").stop(true, false);
});
I have a page where in a div HTMl is loaded from another page. In the parent page, I have javascript which has elements that apply to the dynamic content (such as mouseover animate, etc.). I have been trying to make it work for quite a few hours now but it just won't work. No JS errors in the Chrome developer tools. Can anyone help?
For example on the parent page's javascript I have:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
and the 'child' page where HTML is loaded from
<li class="page">Home</li>
<li class="page">About Us</li>
<li class="page">Store</li>
<li class="page">News</li>
<li class="page">Contact</li>
Your help would be greatly appreciated!
try using 'delegate' method instead of 'on'.
jQuery(body).delegate('ul#nav li.page a', 'mouseover', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
if you wish to attach .on action to a dynamic element, you attach it to the $(document) instead.
and when the new elements are loaded the action is already there.
jQuery(document).on('mouseover', 'ul#nav li.page a', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
try using:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
I just want to create the animation like in this website http://www.msambition.de/. I have created 2 divs 1 on other. I have jquery code as below:
$(document).ready(function() {
$('div.unternehmen-ahover').hover(
function () {
$('div.unternehmen-ahover').slideToggle("slow");
$('span.span-picture-menu').fadeIn();
},
function () {
});
$('div.unternehmen').hover(
function () {
},
function () {
$('div.unternehmen-ahover').slideToggle("slow");
$('span.span-picture-menu').fadeOut();
});
});
Te problem is that on hver it works fine but it remains on other div sometimes and does not do slidetoggle. Kindly help me in this regards.
Thanks in advance
You should create mouseenter and mouseleave event handler for your div and there you should slideToggle. See this link.
$(document).ready(function ()
{
$(".tile2").mouseenter(function () {
$(".trainingmood").delay(0).animate({ opacity: 0 }, 300, "");
$(".text2 span").delay(100).animate({ opacity: 1 }, 300, "");
$(".text2").animate({ marginLeft: "-=310px" }, 300);
});
$(".tile2").mouseleave(function () {
$(".trainingmood").delay(0).animate({ opacity: 1 }, 300, "");
$(".text2 span").animate({ opacity: 0 }, 3, 00, "");
$(".text2").animate({ marginLeft: "+=310px" }, 300);
})
});
I'm trying to make my white background flash green. Currently I have this code which turns it green:
$( "#modal_newmessage" ).animate({
backgroundColor: "#8bed7e"
}, 500 );
However, I can't figure how to make it turn white again in the same animation. How do I do this?
You can chain another .animate() call since the animations will be queued in the fx queue.
$("#modal_newmessage").animate({
backgroundColor: "#8bed7e"
}, 500).animate({
backgroundColor: "#fff"
}, 500);
Remember most jQuery functions are chainable without need to call $("#modal_newmessage") twice.
See it here.
This should work:
$( "#modal_newmessage" ).animate({
backgroundColor: "#8bed7e"
}, 500, function() {
$( "#modal_newmessage" ).animate({ backgroundColor: "#fff" });
} );
Try this:
$(function() {
$( "#modal_newmessage" ).animate({
backgroundColor: "#aa0000",
color: "#fff",
width: 500
}, 1000 ).animate({
backgroundColor: "#fff",
color: "#000",
width: 240
}, 1000 );
});
note:
For animating background colors you need jQuery ui for color animation.
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
I'm trying to animate background-color,color and border color to change with jquery but for some reason border color is not changing any idea why? here is the portion of jquery code :
$('#tabbed a').hover(function() {
$(this).animate({
backgroundColor: "#FBFBFB",
color:"#FD7A24",
borderColor:"#000"
}, "fast")
}, function() {
$(this).animate({
backgroundColor: "#FFF",
color:"#65B1D3",
borderColor:"#eee"
}, "fast")
});
Thank you
The jQuery Color Plugin doesn't support just borderColor. You need to supply all four sides:
$('#tabbed a').hover(function() {
$(this).animate({
backgroundColor: "#FBFBFB",
color:"#FD7A24",
borderLeftColor: "#000",
borderTopColor: "#000",
borderRightColor: "#000",
borderBottomColor:"#000"
}, "fast")
}, function() {
$(this).animate({
backgroundColor: "#FFF",
color:"#65B1D3",
borderLeftColor: "#eee",
borderTopColor: "#eee",
borderRightColor: "#eee",
borderBottomColor:"#eee"
}, "fast")
});
You can see from line 10 of the source which properties it can animate:
...['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor']...