We Keep Coding

Why changing img src with jQuery works incorrectly?

Well, the task is to change img src on click.
It was not a problem to do it.
But I'd like to have some effect while changing it.
So, I used fadeOut and fadeIn. Problem is when the img src is changing the img starts "sparkling / blinking".
You can see an example here
http://www.coffee-cult.ru/slidersupreme
(rectangle in top right corner activates slider buttons)
and the code,
$main_image = $("img").first();
$("#prev_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$main_image.attr('src', images[0]);
}).fadeIn(400);
});
$("#next_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$main_image.attr('src', images[1]);
}).fadeIn(400);
});

you can try to use
$(this).attr();
instead of
$main_image.attr();

It has something to do with your other scripts on the page. Here in the fiddle it looks kind of alright with the same code: http://jsfiddle.net/ewyLcm0s/
var images = ['http://lorempixel.com/100/100/people/1','http://lorempixel.com/100/100/people/2'],
$main_image = $("img").first();
$("#prev_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$(this).attr('src', images[0]).fadeIn(400);
});
});
$("#next_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$(this).attr('src', images[1]).fadeIn(400);
});
});

Swap back image on hover out with Jquery

I have this HTML code:
<img class="swap" src="/Static/Images/Meny_normal_01.png" alt="" />
and this is my Jquery code and what it does is that when I hover over my img it swaps to another img, but I would like to have a hover out and then it swap back to the old img.
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
});
});
Would appreciate any kind of help

.hover() binds two handlers to the matched elements, to be executed when the mouse pointer enters and when you leaves the elements.
$(".swap").hover(
function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);

You can pass 2 handlers into the hover - like this:
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);
});
Have a look at: http://api.jquery.com/hover/ for more info
Or a similar item on SO: jquery change image on mouse rollover

$(".swap").hover(function() {
$(this).attr("src", function(i, val) {
return val.indexOf("hover") == -1
? val.replace("normal", "hover")
: val.replace("hover", "normal");
});
});
DEMO: http://jsfiddle.net/UJR8M/

How to revert the pixastic effect?

<script type="text/javascript">
$(function() {
jQuery(".attachment-thumbnail")
.pixastic("desaturate")
.pixastic("sepia")
});
</script>
I got this pixastic script working, now I need to revert the effects on rollover. I don't really know how to do that though.
The link is here if you want to take a look, http://mentor.com.tr/wp/?page_id=218

jQuery(".attachment-thumbnail").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
jQuery(this).pixastic("desaturate");
}
});
Note that sepia won't do anything combined with desaturate
The plugin is not very well documented, so in the future I suggest taking a look into the source code, in this example line 403 shows
revert : function(img) {

$(window).load(function () {
$(".thumb").pixastic('desaturate');
$(".thumb").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
$(this).pixastic("desaturate");
}
});
})

Hi guys everything said above works great if you're directly setting hover events on the image.
Whereas in my situation I wanted the the image to blur if I hover on the image container (which contains other divs too, not just the image).
Here is my code in case anyone else is dealing with something similar:
$(function () {
$('.col1.w1').mouseenter(function () {
var origImg = ($(this).find('.imageUrl'));
if (origImg.is('img')) {
Pixastic.process(origImg[0], 'blurfast', { amount: 2 });
}
});
$('.col1.w1').mouseout(function () {
var origImg = ($(this).find('.imageUrl'));
Pixastic.revert($(this).find('.imageUrl')[0]);
});
});

Jquery and CSS background change

I am having problem with the following line:
document.getElementById("giftcard").getElementsByTagName("label").style.backgroundImage ="url(giftcard_icon-d.jpg)";
I am trying to change background image after clicking a label.
I do have 5 labels in a page, but when i click on label, the background should change it. Other labels should be reset to use this giftcard_icon-d.jpg image as their background.
How can I fix this?
$(document).ready(function() {
$('#giftcard label').click(function() {
document.getElementById("giftcard").getElementsByTagName("label").style.backgroundImage ="url(giftcard_icon-d.jpg)";
this.style.backgroundImage ="url(giftcard_icon-a.jpg)";
});

If you're using jQuery, this ought to do the trick:
$(document).ready(function() {
$('#giftcard label').click(function() {
$("#giftcard label").css("background-image", "url(giftcard_icon-a.jpg)");
});
});
But it also depends on whether the ID is correct, a label is present and that the image URL is valid.
For multiple label's you should be OK with a selector:
$("#giftcard > label").css("background-image", "url(giftcard_icon-a.jpg)");
To update after concluding exactly what it was you wanted:
$('#giftcard label').click(function() {
$("#giftcard label").css("background-image", "url(giftcard_icon-d.jpg)");
$(this).css("background-image", "url(giftcard_icon-a.jpg)");
});

Firstly your mixing vanilla javascript and jquery here, seems a bit silly. If you want to alter the other labels to "reset" them you can do something like this:
$(document).ready(function() {
$('#giftcard').delegate('label', 'click', function() {
$(this).css('background', 'url(giftcard_icon-d.jpg)');
$('#giftcard > label').not(this)
.css('background', 'url(giftcard_icon-a.jpg)');
});
});
fiddle: http://jsfiddle.net/garreh/GUFtx/

If I understood it correctly this should do the trick
$(function() {
$('#giftcard label').click(function() {
$('#giftcard label').css("background-image", "url(giftcard_icon-d.jpg)");
$(this).css("background-image", "url(giftcard_icon-a.jpg)");
});
});
working sample
http://jsfiddle.net/FvNdR/

mouseOut effect with a mask

The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>

$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});

Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);

If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);