Jquery pulsate from different colors [duplicate] - javascript

This question already has an answer here:
Jquery pulsate changing color or image
(1 answer)
Closed 9 years ago.
I want to pulsate from white to another color but i'm not sure how to add color to this code
<script>
$(document).ready(function() {
$("#white36").click(function () {
$('#book').effect("pulsate", { times:3000 }, 500);
});
});
</script>

You are going to need this plugin to animate colors with jquery (its not there be default):
http://www.bitstorm.org/jquery/color-animation/
then you can do something like:
var pulsateInterval = null, i = 0;
$(document).ready(function() {
$('#white36').click(function() {
// set interval to pulsate every 1500ms
pulsateInterval = setInterval(function(){
// animate back and forth
$('#book').animate({
background-color: 'red',
}, 500).animate({
background-color: 'white',
}, 500);
i++;
// stop at 3000 pulsations
if(i == 3000){
clearInterval(pulsateInterval);
}
}, 1500);
});
});

Pulsate only changes de opacity of an element, not the color. You can put an element with white background below your element to get what you want.
Like:
<div style="background:#ffffff;"><div id="my_elem" style="#006600"></div></div>

you could recreate the pulsing effect you want using animate in this way:
$(document).ready(function() {
$('#white36').click(function() {
$('#book').animate({
background-color: 'red',
}, 300).animate({
background-color: 'white',
}, 300).animate({
background-color: 'red',
}, 300);
});
});

for some ideas:
$(document).ready(function() {
$("#white36").click(function () {
$("#book").animate({
width: "50%",
opacity: 0.3,
fontSize: "3em",
borderWidth: "10px",
color: "black",
backgroundColor: "green"
}, 1500 );
});
});
edit: just tried to run the above code and it didn't work when background-color was specified. If i ran it without that param it worked fine though. Guess it's buggy as I tried with both "background-color" and "backgroundColor"

Related

Make .css repeat several times based on milliseconds - DRY

I'm trying to learn to improve my code and not repeat myself. I'm trying to use .css() to make an aesthetic design element "flash" before disappearing. I have the result working but I am sure there is a better/shorter way to write this.
At the moment I am setting four intervals which handle changing the CSS.
setTimeout( function(){
$(outputID).css('border-right','2px solid #fff');
},500);
setTimeout( function(){
$(outputID).css('border-right','2px solid #343434');
},1000);
setTimeout( function(){
$(outputID).css('border-right','2px solid #fff');
},1500);
setTimeout( function(){
$(outputID).css('border-right','2px solid #343434');
},2000);
What would be the best way to do this, using the DRY principle? Loop through a 500 millisecond interval and then cancel based on 2000 milliseconds? Using .delay() somehow?
You can use a data-driven approach
var objA = [{
duration: 500,
style: '2px solid #fff'
}, {
duration: 1000,
style: '2px solid #343434'
}, {
duration: 1500,
style: '2px solid #fff'
}, {
duration: 2000,
style: '2px solid #343434'
}];
for (var i = 0; i < objA.length; i++) {
(function(i) {
setTimeout(function() {
$(outputID).css('border-right', objA[i].style);
}, objA[i].duration);
})(i);
}
Make sure to make a closure in the loop by using an IIFE to preserve the i variable
Pure CSS can handle this kind of task via Keyframe Animations. I created a fiddle to get you started, but it needs to be adjusted (especially as I left out vendor prefixes).
It basically boils down to this:
#keyframes borderblink {
0% {
border: 2px solid blue;
}
49% {
border: 2px solid blue;
}
50% {
border: 2px solid white;
}
100% {
border: 2px solid white;
}
}
.mybox.border-animated {
border: 2px solid blue;
animation-name: borderblink;
animation-duration: 0.4s;
animation-iteration-count: 10;
}
If you want to support browsers which do not include this feature (IE8+9, Opera Mini), you could use Modernizr for feature detection and only call your javascript solution if needed. But as it is only a visual goodie, I would probably not go that far if you don't already have Modernizr included.
To elaborate on my comment for jquery animate:
$(outputID)
.delay(500)
.animate({ borderColor: "#fff" }, 10)
.delay(500)
.animate({ borderColor: "#343434" }, 10)
.delay(500)
.animate({ borderColor: "#fff" }, 10)
.delay(500)
.animate({ borderColor: "#343434" }, 10)
You can use variables of course for delay times, the 500 matches the question timeouts and the 10 reduces the animation 'effect' so to flashes rather than pulses.
There are a lot of ways of achieving this. With "pure" JavaScript with a little bit of jQuery, you would do something like:
// flash an element and call the callback when done
var flash = function(element, cb) {
var counter = 0;
var max = 4;
var state = false;
var animate = function() {
// assume we have to css classes "off" and "on"
if (state)
element.removeClass("on").addClass("off");
else
element.removeClass("off").addClass("on");
state = !state;
counter++;
if (counter<max)
setTimeout(animate, 500);
else {
// make sure we end up in "off" state
element.removeClass("on").addClass("off");
if (cb instanceof Function) cb();
}
}
animate();
}
// use it like
flash(myElement, function () {
// we can even do stuff when flashing has stopped, how cool is that!
});
Hello if you consider best way, then according to me you can use css animation keyframes. http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
But if you want only to do the job via javascript then you can go with ammarcse' answer.

overflow-y: scroll causing issues with JQuery

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/
Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});

jQuery Transit Function Complete

I have created these two functions using jquery transit that are designed to slide in a new block of html on to the page when the user presses on the right or left buttons. They work some of the time. Other times the content will load and then not unhide itself. So it will be loaded and you can inspect it with chrome and see the display is still set to none. Other times there are no problems and it works exactly as intended. There are no errors on page. Really the only JavaScript on the page is several different versions of this function that all load a different page and scroll it in, in some matter or form.
My question is: Am I using the function completes correctly from jquery Transit? Is my function working as intended or have I missed something big and there not set up properly.
function ShowPartTiles_FromLeft() {
$("#SeriesPartBrand").transition({
opacity: 0,
x: "1000px"
}, 500, "out", function() {
$("#SeriesPartBrand").transition({
opacity: 0,
x: "-1000px"
}, 0, "out")
}), $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
$("#SeriesPartBrand").transition({
opacity: 1,
x: "0"
}, 500, "in")
})
}
function ShowPartTiles_FromRight() {
$("#SeriesPartBrand").transition({
opacity: 0,
x: "-1000px"
}, 500, "out", function() {
$("#SeriesPartBrand").transition({
opacity: 0,
x: "1000px"
}, 0, "out")
}), $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
$("#SeriesPartBrand").transition({
opacity: 1,
x: "0"
}, 500, "in")
})
}
There is no transition function in jQuery, there is an animate one.
But I would advise using css3 transition property:
#SeriesPartBrand {
transition: all 0.5s;
}
function ShowPartTiles_FromLeft() {
$("#SeriesPartBrand").css({opacity: 0, left: 1000});
$("#SeriesPartBrand").off('transitionend').on('transitionend', function() {
$("#SeriesPartBrand").css({opacity: 0, left: -1000});
$("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
$("#SeriesPartBrand").css({opacity: 0, left: 0});
});
});
}
This should get you started. Also don't name your JS functions with first capital letter and don't, the name would look better like this: "showPartTilesFromLeft()".
And html ids and classes must be all lowercase with words separated by comma "-".

jQuery: Mouse Interaction + Simple Animation [img]

I'm new to jQuery so please work with me here. :)
[Site Image] http://imgur.com/zx803Ct
So I'm trying to have the bottles here to animate with cursor interaction.
Goal: I want the hovered image to come to the foreground and the rest to shrink into the background.
Undesired Results: The code seems to shrink all the bottles without condition. I seem to be running into trouble with the "if, then, else" section.
Process:
Store 'mouseEntered' element, do for each bottle, check if match, apply effects.
Code:
$(".sauce_bottle").mouseenter( function(){
var $active = $(this); //The "entered" image
//For each (div) bottle, check if "entered", apply effects
$('.sauce_bottle').each( function(){
if ( $active == $(this) ) {
//Shrink
alert($active.attr("alt"));
$(this).animate({
height: "230px",
width: "70px",
opacity: ".70"},
150);
} else {
//or Enlarge
$(this).animate({
height: "279px",
width: "85px",
opacity: "1"},
150, function(){});
}
});
});
If I'm missing a concept (scope) or if you guys have an alternative way of doing this that would be fantastic!
Thanks guys! :)
I would do it like this:
$(".sauce_bottle").mouseenter( function() {
$(this).animate({
height: "279px",
width: "85px",
opacity: "1",
}, 150);
$(".sauce_bottle").not(this).animate({
height: "230px",
width: "70px",
opacity: ".70",
}, 150);
});

jquery fading border not working

I just want some simple links where if it's hovered over, instead of having a line appear under it suddenly, it should fade. I'm trying this, but to no avail:
$(document).ready(function(){
$('#footer a').mouseover(function(){
$(this).animate({
border-bottom: 'border-bottom: 1px solid #D8D8D8'
}, 1000, function() {
// Animation complete.
});
});
});
What should I be doing?
Thanks.
You need a few changes here, first you should animate only the color, like this:
$(function(){
$('#footer a').mouseover(function(){
$(this).animate({
borderBottomColor: '#D8D8D8'
}, 1000, function() {
});
});
});​
Also, give the border an initial size so it doesn't just "appear" (when changing from 0 to 1px), like this:
​​#footer a { border-bottom: solid 1px transparent; }​
You can see a working demo here, to make this work you need either the color plugin or jQuery UI so the colors can animate...core doesn't handle colors, or transitioning anything that's not a number.
Here's a more complete demo, probably what you're ultimately after:
$(function(){
$('#footer a').hover(function(){
$(this).animate({ borderBottomColor: '#D8D8D8' });
}, function() {
$(this).animate({ borderBottomColor: 'transparent' });
});
});
​

Categories