jQuery returns the same opacity - javascript

I am trying to use simple animation with opacity css property:
$('#testAnimation').click(function (event) {
if ($(this).css('opacity') == 0) {
$('#animationTarget').animate({opacity: 1}, 'slow');
} else {
$('#animationTarget').animate({opacity: 0}, 'slow');
}
});
The first time, element is successfully hidden. But when I click button second time, $(this).css('opacity') returns value "1".
Debugging in browser clearly says that opacity is 0.
Can someone explain this behavior?

You are checking the opacity of this and changing the one of the #animationTarget.
This should do it:
$('#testAnimation').click(function (event) {
if ($('#animationTarget').css('opacity') == 0) {
$('#animationTarget').animate({opacity: 1}, 'slow');
} else {
$('#animationTarget').animate({opacity: 0}, 'slow');
}
});

Well, this was my fault.
For anyone who faces similar issue, be sure that you are checking property of the desired element:
if ($(this).css('opacity') == 0)
Should be replaced with:
if ($('#animationTarget').css('opacity') == 0)

Try using .fadeIn() and .fadeOut() to achieve what you are doing.
Less code to write. have a look at the :visible part as I don't remember if it is the correct syntax!
$('#testAnimation').click(function (event) {
if ($(this).is(':visible') {
$(this).fadeOut();
} else {
$(this).fadeIn();
}
});

Checking for $(this) within your click event handler you will refer to the element $('#testAnimation')
Instead you should check for $('#animationTarget') and also you can refactor your code like this:
$('#testAnimation').on('click', function (event) {
var $animationTarget = $('#animationTarget'),
opacity = $animationTarget.css('opacity') == 0 ? 1 : 0;
$animationTarget.animate({opacity: opacity}, 'slow');
});

Related

jQuery - If and Else If's for marginLeft's

i was wondering if you could help me out, i'm trying to create if based interactions on my website but sadly the code does not work and i can't think of as to why. The idea is to click a button to move it left, then when another button is clicked at it's next set position it brings it back in again.
if($("#featImgOne").css("marginLeft")=='0px'){
$('#featNext').click(function(){
$('#featImgOne').animate({marginLeft:"-960px"});
});
}
else if($("#featImgOne").css("marginLeft")=='-960px'){
$('#featPrev').click(function(){
$('#featImgOne').animate({marginLeft:"0px"});
});
}
Just to note the first click works but the second wont, so i'm perplexed
Thanks in advance, hope someone can help
You have to move the if consitions inside click handler
$('#featNext').click(function () {
if ($("#featImgOne").css("marginLeft") == 0) {
$('#featImgOne').animate({
marginLeft: "-960px"
});
}
});
$('#featPrev').click(function () {
if ($("#featImgOne").css("marginLeft") != 0) {
$('#featImgOne').animate({
marginLeft: "0px"
});
}
});
What you're expecting will not happen, because the second click event is never added, because at the beginning the margin-left is not that value. Fix this by removing the conditional statements:
$('#featNext').click(function () {
if ($("#featImgOne").css("marginLeft") == 0) {
$('#featImgOne').animate({
marginLeft: "-960px"
});
}
});
$('#featPrev').click(function () {
if ($("#featImgOne").css("marginLeft") != 0) {
$('#featImgOne').animate({
marginLeft: "0px"
});
}
});
You are going to have to add some kind of a loop. Try a while Loop.**while**//add a condition

formulation of condition in if-statement

I have this:
$(function() {
if () {
$('#content').css('position', 'fixed');
});
});
So, now what I want:
If the 'top' of '#content' is 0, I want the css that is written down in the function to happen. But I don't know how to write that down in between the brackets after 'if'.
Maybe someone can help me with this basic if-statement?
Much thanks in advance!
edit-----------------------------
Seems to work better and better, still one problem though.. I now have this:
$(function() {
if ( $('#content').offset().top == 0) {
$('#content').css({'position' : 'fixed'});
}
else {
$('#content').css({'position' : 'relative'});
}
});
And this:
$(document).ready(function() {
$('#content').scrollTop('100%');
});
But now the div is immediately 'fixed'..
FIDDLE
Use $('selector').offset().top to get the numeric value of the top position.
if ($('#content').offset().top == 0) {
$('#content').css('position', 'fixed');
});
for more information you can see this
Also set your css in condition like this
$('#content').css({'position' : 'fixed'});
In case of your scroll to top you can do like this
$('#content').scrollTop(yourtopvalue); // your top value goes here.
For animated effects, you could do like this also
$('selector').animate({scrollTop:$('#content').offset().top}, 'slow');
You can mix up these stuffs like these ways using jQuery.

Jquery hide div partially

I would like to adjust the width of the div using jquery on click event, and i can't seem to figure out what the exact syntax is.
below is an example of what i tried so far.
$(function() {
$("#square").on("click", function(){
if($(this).css("width", "50")){
$(this).animate({width:"500"}, 1000);
} else {
$(this).animate({width:"50"}, 1000);
}
});
});
http://jsfiddle.net/4GGP8/
Thanks in advance.
In your if statement try $(this).width() == 50 instead, since first of all css(); functions retrieves the unit as well and second of all you're not making a comparison in the if statement like that, if anything you should do $(this).css('width') == "50px" to retrieve the width and compare it.
For future reference you can always use parseInt(); to get rid of the unit added by css
so doing this is also valid
if(parseInt($(this).css('width')) == "50")
The code:
$(function() {
$("#square").on("click", function(){
if($(this).width() == 50){
$(this).animate({width:"500"}, 1000);
} else {
$(this).animate({width:"50"}, 1000);
}
});
});
Here is the resulting fiddle
Try this -
jsFiddle
$("#square").on("click", function(){
if($(this).css('width') == '50px'){
$(this).animate({width:"500"}, 1000);
} else {
$(this).animate({width:"50"}, 1000);
}
});

if width == 200px run function

Here is a jsFiddle showing the problem
I'm not sure why this doesn't work:
if ($('#menu').width() == '200px') {
alert("what");
}
I want an alert to appear when the animation is completed. So I assumed that I could say that since when the animation is done the element has a width of 200px, it would show the alert.
1) You're checking for the value before the animation completes.
2) You width value will be "200" not "200px"
Here is the jQuery documentation. You need to perform your check in the callback section of the code.
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete. <---- your value check code goes here
});
});
jQuery.width returns a number. You are comparing with a string.
Check the updated fiddle. What I did was added a 'callback' function, which executes whenever the animation is complete.
$(this).stop().animate({ width: "200px" }, 250,
function(){if ($('#menu').width() == '200') { alert("what"); } /* Callback Function */
});
.width() should return a number, not a "###px" value, Try if ($('#menu').width() == 200) {.

How to change jQuery toggle() status

Using toogle to show/hide the div, I've got a problem that when I hide my div with anothor function, I have to click twice on the button to perform correct action.
Is there any way change the toggle switch like I clicked the button?
$('#add_task').toggle(function() {
if ($("#new_task_status").attr("value")==0) {
$("#new_task").slideDown();
$("#new_task_status").attr("value", "1");
}
}, function() {
if ($("#new_task_status").attr("value")==1) {
$("#new_task").slideUp();
$("#new_task_status").attr("value", "0");
}
});
$('nav').click(function() {
if ($("#new_task_status").attr("value")==1) {
$("#new_task_status").attr("value", "0");
$("#new_task").slideUp();
}
});
You could change your .toggle() so it doesn't matter, like this:
$('#add_task').click(function() {
$("#new_task").slideToggle(function() {
$("#new_task_status").val($(this).is(':visible') ? 1 : 0);
});
});
This does a slideToggle() instead, so the current state doesn't matter...when it finishes sliding, if it's shown (you opened it) you get a 1 in the input, otherwise you get a 0. Also, use .val() for input setting, much easier and more universal (I'm assuming it's an input here since that's most likely).
No, you would have to implement your own alternative to the toggle() function, which checks the current state of the element.
I don't see any need to use toogle at all. You can do the same with just a click handler:
$('#add_task').click(function() {
if ($("#new_task_status").attr("value")==0) {
$("#new_task").slideDown();
$("#new_task_status").attr("value", "1");
} else {
$("#new_task").slideUp();
$("#new_task_status").attr("value", "0");
}
});
and then:
$('nav').click(function() {
$('#add_task').click();
});
Btw. nav is not a HTML element. You probably mean #nav (maybe just a typo).
And as Nick already mentioned, consider to use .val().
I suggest an event-driven approch, like:
$("#add_task").bind({
"toggle": function(e) {
$("#add_task").trigger(($("#new_task_status").attr("value")==0) ? "open" : "close"););
},
"open": function(e) {
$("#new_task_status").attr("value", "1");
$("#new_task").slideDown();
},
"close": function(e) {
$("#new_task_status").attr("value", "0");
$("#new_task").slideUp();
}
});
$("#nav").click(function() {
$("#add_task").trigger("toggle");
});

Categories

Resources