I was wondering how can I add a fade effect when hovering using this example http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm
I was wondering if its possible to achieve something like this www.bungie.net
Here's the code used in the example
$(document).ready(function() {
// Image swap on hover
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
I used bruchowski's code which worked great for me. I did change .hover to .mouseover because I was getting a double fade effect when mousing out and I just wanted the last moused over image to stick.
I'm also very new to jquery and at first pasted it in the wrong place. Once I placed it directly before $(imgSwap).preload(); it worked.
And I slowed the fade down.
So my code is as follows:
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$("#gallery li img").mouseover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400);
}); $(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
Thanks!!!
This is a quick solution (you would add this to their existing code, do not edit what they already have)
$("#gallery li img").hover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300);
});
In this part of the code that is like this in their example
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
Change to
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this)
.fadeOut('fast')
.attr('src').replace('thumb/', ''));
});
Related
I want the current content to slideUp and then slideDown the clicked content and I am stumped on why the code I have won't work. It just slides down the text . content. Any help much appreciated!
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
$(".contentContainer").html('.content');
}).slideDown(1500);
});
});
});
When you do .html('.content'), you're telling jQuery to literally make ".content" the innerHTML of the container (ex.: div or span with class .contentContainer).
It's a little unclear what content you are trying to place in .contentContainer, but assuming it is the html of the first tag with the class ".content", you could use this:
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
// Change this line...
$(".contentContainer").html($('.content').html());
}).slideDown(1500);
});
});
});
Edit: Updated to make it take the content of the first tag with the class ".content".
http://jsfiddle.net/nn0x6da8/2/
I have some javascript that I am using for some audio on my website:
<script type="text/javascript">
$(function() {
var a = audiojs.createAll({
trackEnded: function() {
var next = $("ul li.cow").next();
if (!next.length) next = $("ul li").first();
next.addClass("cow").siblings().removeClass("cow");
audio.load($("a", next).attr("duck"));
audio.play();
}
});
var audio = a[0];
first = $("ul a").attr("duck");
$("ul li").first().addClass("cow");
audio.load(first);
$("ul li").click(function(e) {
e.preventDefault();
$(this).addClass("cow").siblings().removeClass("cow");
audio.load($('a', this).attr('duck'));
audio.play();
});
});
</script>
What I'd like to do is add ".mp3" after the attribute "duck"...how do I do that? *Attribute "duck" appears three times and I would like to add the extension ".mp3" after all three :)
Thanks,
Josh
To change their attributes:
$("ul a").each(function(){
$(this).attr("duck", $(this).attr("duck") + ".mp3");
});
To change the string only:
first = $("ul a").attr("duck") + ".mp3";
I guess you're asking about simple string addition? Then just add
+ ".mp3"
after each attr('duck')
I'm trying to append a string of text to the src attribute of an image on mouseover and then remove that string on mouseout. Right now I have it half working:
Javascript
$('.singleSidebar .subnav img').mouseover(function(){
$(this).attr('src', function(index, attr) {
return attr.replace(/\.[^.]*$/, '_anim$&');
});
});
I found this code somewhere else and so I'm not exactly sure how to modify it to remove the string _anim on mouseout.
I would suggest just loading both images and then only showing the one you want. This can all be accomplished with CSS.
Give one image a class of "animated" and the other class of "nonanimated". Add this CSS to handle the onhover change:
.singleSidebar .subnav img.animated,
.singleSidebar .subnav img.nonanimated:hover
{
display: none;
}
.singleSidebar .subnav img.animated:hover,
.singleSidebar .subnav img.nonanimated
{
display: block
}
This will work better because the browser will load the image right away instead of when you hover your mouse, it's also a bit cleaner IMO
EDIT
Ah, if you need them to start playing on hover then you will need to do it your way. Try something like this:
$('.singleSidebar .subnav img').each(function(e){
var src = $(this).attr('src');
$(this).hover(function(){
$(this).attr('src', src.replace('.gif', '_anim.gif'));
}, function(){
$(this).attr('src', src);
});
});
$(".singleSidebar .subnav img").hover(
function () {
$(this).attr('src', function(index, attr) {
return attr.replace(/\.[^.]*$/, '_anim$&');
});
},
function () {
$(this).attr('src', function(index, attr) {
return attr.replace('_anim', ''); // or any other replace
});
}
);
See http://api.jquery.com/hover/ for more information
http://jsfiddle.net/dZ3c2/1/
var src;
$("img").hover(function() {
src = $(this).attr("src");
$(this).attr("src", "replacementsrc");
},function() {
$(this).attr("src", src);
});
Should be able to use .mouseout and reverse the replace.
$('.singleSidebar .subnav img').mouseout(function(){
$(this).attr('src', function(index, attr) {
return attr.replace(/_anim$/, '');
});
});
I am using jquery and what I want to do here is to be able to set the image that will show up based upon the link that is being hovered to.
<script type='text/javascript'>
$(function(){
$('img').hide();
$('a').mouseenter(function(){
var currentimg= $(this).html();
alert(currentimg);
$("img[src=currentimg.jpg]").show(); //I want to use currentimg variable here for the name of the jpg file
});
$('a').mouseleave(function(){
$('img').hide();
});
});
</script>
You can just concatenate the string for use, for example:
$("img[src='" + currentimg +"']").show();
Just to note, there's also a .hover() shortcut for .mouseenter(handler).mouseleave(handler), like this:
$(function(){
$('img').hide();
$('a').hover(function(){
var currentimg = $(this).html();
$("img[src='" + currentimg +"']").show();
}, function(){
$('img').hide();
});
});
I'm using JQuery to create a Horizontal Accordion menu (based on the tutorial at Design Reviver. I have it working well, but I need to add a second Horizontal Accordion menu just like it to the same page. I'm sure this can be done, but I don't know how to adjust the script in the head section so that both menus work at the same time. I've experimented with the code, but with no luck so far.
The menu is based on an unordered list, and the first list item has an anchor tag with id="a1" so that it can be told to be "open" to begin with (while the other menu items appear "collapsed").
Each menu is inside a wrapper div, the first has class="jq_menu" and the second has class="jq_menu2".
At present, I have the following code in the head section of my page. Both menus appear on the page but only the first has the sliding animation working. Any advice is much appreciated! Thank you.
<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;
$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
}
);
});
</script>
<script type="text/javascript" >
$(document).ready(function(){
var lastBlockB = $("#a2");
var maxWidthB = 180;
var minWidthB = 60;
$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
}
);
});
</script>
The ready() function triggers when the DOM is registered by the browser. So it will be called only once. Get rid of the second block of JavaScript and include the code for the second menu within the $(document).ready() function of the first block.
You can use the map function
['jq_menu', 'jq_menu2'].map(function(n){
$("." + n + " ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
}
);
})
Thanks for the sugggestions. Based on the answer from mplusz, I've now got the following code. At the moment, neither menu has the animated sliding action. Could this be an issue with my syntax? Otherwise, I don't know how to combine the hover functions due to the different div classes (jq_menu2 and jq_menu) and the different variable names (lastBlock, lastBlockB etc).
<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;
var lastBlockB = $("#a2");
var maxWidthB = 180;
var minWidthB = 60;
$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
}
);
}
$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
}
);
});
</script>
[Edit]
I think your main problem may be that you only have one half of the hover function. the hover function takes two parameters, what to do on mouseon, and what to do on mouseoff.
$(thing).hover(
function(){ /*do this when they hover over*/ }, //<---- don't forget that comma
function(){ /*do this when they remove their mouse*/ }
);
When you declare lastBlock as a jQuery object:
var lastBlock = $("#a1");
You don't need to call it within the jQuery selector later on.
Bad
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
Good
lastBlock.animate({width: minWidth+"px"}, { queue:false, duration:200 });
Thank you SO much to everyone who helped me out here. When I added the second parameter for mouseoff, both my image menus started sliding, and one image always remains open from each menu - just as I wanted!
(Interestingly, when I removed the jQuery selector from $(lastBlock).animate etc, it broke the functionality. Not sure why this would be, but very happy that it's working with the selector anyway.)
I've included the final code below in case it helps anyone else :)
<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;
var lastBlockB = $("#a2");
$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
},
function(){ /*do this when they remove their mouse*/ }
);
$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlockB = this;
},
function(){ /*do this when they remove their mouse*/ }
);
});
</script>
When the site goes live, I'll post a link so that people can see the effect in action.