Okay, I've been trying to get this for almost 4 hours now, and it just won't work.
I have a link:
<a id="togglecolor" href="#" onclick="ToggleCover();">
Click here to toggle DIV so you can see what I did.
</a>
And I have a div:
<div id="framecover" style="position:absolute; width:97%; height:500px; z-index:100; background-color: transparent;">
</div>
I am trying to make a script so the link toggles the background color of the div from transparent to red and back again when you click it again.
This is the code I have:
$(function() {
$('#framecover').css('backgroundColor', "transparent")
var framecover = '#framecover'
$("a#togglecolor").click(function(){
if ($(framecover).css('backgroundColor') == "transparent")
{
$(framecover).animate({ backgroundColor: "red" }, "slow");
}
else
{
$(framecover).animate({ backgroundColor: "transparent" }, "slow");
}
});
});
Through my testing, I've been able to narrow down to where the problem is. It's on this line: if ($(framecover).css('backgroundColor') == "transparent")
Undoubtedly, he problem is above code is the wrong syntax for "if framecover's background-color is transparent". The problem is that I have no clue what the syntax is and I've been scouring the internet for two hours looking for the answer and I can't find it.
Note: I do have the jquery color plugin. This code: $(framecover).animate({ backgroundColor: "red" }, "slow"); works fine. It's the if statement that's giving me trouble.
Assuming you want it to start at transparent (if not just switch them):
$("a#togglecolor").toggle(function(){
$(framecover).animate({ backgroundColor: "red" }, "slow");
}, function(){
$(framecover).animate({ backgroundColor: "transparent" }, "slow");
});
First this I'd try is to use console.log($('#framecover').css('backgroundColor')) to find out exactly what the background color is at the point of the test (might be none). Copy this and it should work.
Second option, check if the background is red, make the transparent background setting part of the else execution
Have you tried :
if (... .css("backgroundColor") == "rgba(0 ,0 , 0, 0)") { ...
Works in Chrome but I haven't tried all browsers.
jsFiddle here.
Related
What I'm trying to achieve: when my mouse is moving then do this, but when it stops moving for like half a second then do that, but when it starts to move again then do that.
This is my temporary jQuery:
$(document).ready(function() {
$('.test').mouseenter(function(){
$(this).mousemove(function(){
$(this).css({
'background-color' : '#666',
'cursor' : 'none'
});
});
});
$('.test').mouseout(function(){
$(this).css({
'background-color' : '#777',
'cursor' : 'default'
});
});
});
And I have absolutely no idea how to do that, basically my code does this: when you enter an element with a mouse and your mouse is moving inside that element then apply this CSS and when your mouse leaves the element then apply this CSS, but when mouse is inside that element and it stops moving for some period of time then do this <- I can't figure the last bit out.
I understood that you want to detect the mouse movements over a particular element.
To achieve this, you need to use the mousemove event... There is no mousefroze event, sadly!
So you will use a setTimeout() and will constantly clear its callback while the mouse moves. Since that event fires multiple times on a single slight movement, you can set the delay quite tight. So it should be accurate.
The setTimeout callback will execute only when the mouse will stop moving. And that is the whole "trick".
About delays... I think that 100 ms is the lowest accurate value. Less than that will create flickering on "slow" user moves.
The mouseenter is not really usefull here, because it is overridden by the mousemove event right after (because when the mouse enters... it also moves!). But the mouseleave or mouseout is really usefull to restore the element's original state and clear the timeout too... Because the mouse won't be moving over your element does'nt mean it doesn't move at all. So you have to clear that when leaving.
$(document).ready(function() {
var test = $('#test');
var moveTimer;
test.on("mouseout",function(){
$(this).css({
'background-color' : 'white',
}).text("");
clearTimeout(moveTimer);
});
test.on("mousemove",function(){
console.log("I'm moving!");
clearTimeout(moveTimer);
moveTimer = setTimeout(function(){
console.log("I stopped moving!");
test.css({
'background-color' : 'red',
}).text("The mouse is not moving.");
},100)
$(this).css({
'background-color' : 'blue',
}).text("Movement detected...");
});
});
#test{
margin:50px;
border:2px solid black;
height:200px;
width:200px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
CodePen
Sounds like you're looking for timeouts. In a similar project, I used something like this:
var timer;
function active() {
// Apply active styles
}
function inactive() {
// Apply inactive styles
}
$('.test').mousemove(function(){
active(); // Apply active styles
clearTimeout(timer); // Reset the timer
timer = setTimeout(out, 500);
});
Once you move the mouse over the area, that launches a timer that resets every mouse move. If the timer is ever allowed to expire, the user's gone inactive and we run whatever code we like.
So I was just googling. This is the answer:
$(document).ready(function() {
var countdown;
$('.test').hover(function() {
setTimeout(function(){
$('.test').css({
'background-color' : '#666',
'cursor' : 'none'
});
cursor();
}, 2000);
}, function(e){
$('.test').css({
'background-color' : '#777',
'cursor' : 'default'
});
});
$('.test').mousemove(function() {
$('.test').css({
'background-color' : '#777',
'cursor' : 'default'
});
cursor();
});
function cursor() {
countdown = setTimeout(function() {
$('.test').css({
'background-color' : '#666',
'cursor' : 'none'
});
}, 2000);
}
});
});
This may deviate from your current code, but I think CSS is more appropriate here than JavaScript.
.test {
background-color:#666;
}
.test:hover {
background-color:#777;
cursor:none;
}
These lines of CSS should perform the exact same thing without the complication. Note that in your example, for every pixel the mouse moves, the css is set once more. And since you are not removing the event handler on mouse out, the event is actually ran multiple times.
I need to animate an image and fade it out at the same time.
The image is situated in the right of the page, I need to move it to the left and fade it out so that when it reaches the left it is totally disappeared. I tried to combine .fadeOut and .animate (see example below) but actually the image moves, stops and then fadeout. Can you help me?
<script>
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px"
}, 1500).fadeOut(1600);
});
</script>
Thank you
Change the opacity of the element. By settings this to zero, the element will fadeout to the duration of the animation.
Code:
$('#link').click(function() {
$('#image').animate({
marginLeft: '-100px',
opacity: 0
}, 1500);
});
Example: http://jsfiddle.net/QqfLL/
Set opacity of #image to 0 and try this :
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px",
opacity: 1
}, 1500);
});
You will have to check if this work correctly in IE.
http://jsfiddle.net/E6cUF/
The idea is that after the page finished loading the grey box slides left from behind the green box, if possible bounce a little.
Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola
http://jsfiddle.net/RBD3K/
However the grey one should be behind the green one and slide from right to left so it appears
To have it bounce you are missing two things i think:
1) you need to load jquery UI.
2) put the bounce effect after the animate effect:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/
Try this . Not sure if this is what you want.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css
http://jsfiddle.net/E6cUF/11/
Okay, so far this works in Chrome, but not Firefox. It's pretty simple so I'm not sure what's going on. If I change .animate to .css it works perfectly (minus the animation).
$("#superfish-1 > li").hover(function() {
$(this).animate({"border-left" : "3px solid #A5D572", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).animate({"border-left" : "1px solid #EFEFEF", "margin-left" : "0px"}, "fast");
});
Thanks
The second parametre to the hover() function should be the animate() function as well, not css(). If css() is meant to be there, remove its second parametre ("fast").
you can not animate color and border type by default with jquery. unless you use some plugin i would recommend that you only animate the border-width.
as mentioned by #mingos you should remove the fast parameter in the css function to.
http://jsfiddle.net/meo/Gsqre/1/
tested in Chrome. Color does not animate.
This version animates the with and the margin and it works in all browsers:
$("#superfish-1 > li").hover(function() {
$(this).animate({"border-left-width" : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).css({"border-left-width" : "1px", "margin-left" : 0});
});
You can change the color separately in the css if you wish, even animate it. Or do the whole animation in CSS: http://jsfiddle.net/meo/Gsqre/3/
Okay this is how you do it. You must css the border-color first and then animate the width:
Make sure you use the borderWidth or borderLeftWidth property (without quotes) otherwise it does't work for some reason.
$("#superfish-1 > li").hover(function() {
$(this).css({"border-left" : "1px solid #A5D572"}).animate({borderLeftWidth : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).animate({borderLeftWidth : "1px", "margin-left" : "0px"}, "fast").css({"border-left" : "1px solid #EFEFEF"});
});
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' });
});
});