|
JavaScript - Text Fade In/out On Hover Help
I was using the below code to fade text links in and out on hover. But the problem I'm having is that if you hover over the text a few times quickly the animation will play over and over. Can someone help me add a 'callback'(?) so while the animation is still playing it won't fade in/out again until its finished? Or point me in the direction of a better way of doing this effect.
Thanks for reading and I looking forward to your help and responses! Heres the code: Code: $(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});
Similar TutorialsHello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded? 2.variables? any help would be appreciated! Thanks, Cookies, whatever this forum gives out, you may receive! I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/. I have found some javascript which looks like it will do the trick. But being a graphic designer and not a web developer or anything it just doesn't work. lol Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve. This is my very first attempt at Javascript here is the html: Code: <link href="style.css" rel="stylesheet" type="text/css" /> <script src="javascript.js" type="text/javascript"></script> </head> <body> <div style="margin:20px;" class="modules"> <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> </div> </body> And the CSS: Code: .modules {
margin:0px -20px 20px;
background-color:#9999CC;
min-height:100%;
width:100%;
}
.single_module {
border:solid 1px #000000;
background-color:#000000;
height:160px;
padding:0;
margin:-1px 0px 0px -1px;
width:240px;
float:left;
}
.toggleopacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity:1;
}
And the Javascript: Code: $("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});
Dear all, I have been trying to replicate a cool javascript effect that appears here. See the funky images fading in when hovering with mouse? I want that ;-) By using Firebug I think I have narrowed down the code needed to: Code: <div id="main" class="clearafter">
<div class="inner clearafter">
<div class="columns clearafter">
<div class="project hovers column" style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);">
<a href="http://mountfolly.co.uk" class="image">
<img width="274" height="137" alt="project" src="/images/41_project.jpg" class="screenshot">
<img width="274" height="137" alt="project" src="/images/7_project.jpg" class="text" style="opacity: 0; display: inline;">
</a>
<h3>Text and titles etc...</h3>
<p>etc etc etc...</p>
</div>
<div style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);" class="project hovers column"></div>
</div>
</div>
</div>
<script type="text/javascript" src="/javascript/global.js"></script>
and this (which I put into a javascript file called global.js): Code: /* project listings */
// to deal with IEs opacity idiocy
$(function() {
$('.project.hovers .text').css({opacity: 0}).show();
$('.project.hovers').css({cursor: 'pointer'}).click(function() {
location.href = $('h3 > a', this).attr('href');
});
});
$('.project.hovers').hover(
function () {
$('.text',this).stop().fadeTo('100',1);
$(this).stop().animate({borderTopColor: '#E9E9E9', borderRightColor: '#E9E9E9', borderBottomColor: '#E9E9E9', borderLeftColor: '#E9E9E9', backgroundColor: '#EEE' }, 100)
},
function () {
$('.text',this).stop().fadeTo(1000,0);
$(this).stop().animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF', backgroundColor: '#FFF' }, 1000)
}
);
But when I re-create the files (index.html, global.js, and replacement images) all I get is this. No hover effect... Any ideas what is missing? Would appreciate some help. Thanks, Wysiwyger PS: If you fancy a laugh, check these out Hi, On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas? Hello everybody, I'll quit new as it comes to programming, so please forgive this nono on forehand. I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout. Thanks for your help. Code: <html>
<head>
<script language='javascript'>
function blink(elementid){
colorarray = Array(
'#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3',
'#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786',
'#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122',
'#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f',
'#9c1c0f');
i=0;
setInterval ("changecolor('"+elementid+"')",200);
}
function changecolor(x) {
var x= document.getElementById(x);
if (x != null){
x.style.color = colorarray[i];
if (i==24){ i= 0;
colorarray = colorarray.reverse();
}
}
i++;
}
var text=new Array();
text[0] = "text 1";
text[1] = "text 2";
text[2] = "text 3";
</script>
</head>
<body bgcolor="#ECFFEC">
<script language="javascript">blink('fade');</script>
// INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY
<div id="fade">TEXT</div>
</body>
</html>
Hi everyone. I'm brand new to this forum and in need of some help. If you've got a free minute and are interested in helping the clueless I've got one for you. I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with: Code: <html>
<head>
<script type="text/javascript">
function setOpacity(level) {
element.style.opacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 1000;
var steps = 20;
var delay = 5000;
function fadeIn() {
for (i = 0; i <= 1; i += (1 / steps)) {
setOpacity(" + i + "), i * duration;
}
}
</script>
</head>
<body>
<p id="text" style="filter:alpha(opacity=0);opacity:0.5">
This is the text.
</p>
<img name="image" src="pic.jpg" onmouseover="javascript:fadeIn(document.getElementById('text'))" />
</body>
</html>
I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps. Any tips on how I can bring this together? Thanks so much for reading this far. I appreciate your time. Hi, This must be a 1st. It works ok in IE...But not in Firefox? I need to use white text over a dark bg color or if possible over an image. The problem is in FF the white text distorts on fade The black text works ok when adding the white bg. See my test code below. (It can be copied straight in to test) If anyone could please take a quick look and give some pointers. Code: <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0; position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}
p{font-size:30px;background-color:purple;color:#fff;}
h2{font-size:30px;background-color:#fff;color:#000;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery;
var welcomeBannerTimer;
function nextSlide(){
var el = $j('#welcomebanner');
var slides = el.data('slides');
var c = el.data('slideIndex');
var n = ((c+1) >= slides.length)? 0 : c+1;
el.data('slideIndex', n);
$j(slides[c]).fadeOut(null, function(){
$j(slides[n]).fadeIn();
});
}
function over(){
clearInterval(welcomeBannerTimer);
}
function out(){
welcomeBannerTimer = setInterval(nextSlide, 3000);
}
$j(window).load(function() {
var el = $j('#welcomebanner');
var slides = $j('#welcomebanner>li');
if (slides.length < 2){
$j(slides[0]).show();
return;
}
el.data('slides', slides);
el.data('slideIndex', 0);
welcomeBannerTimer = setInterval(nextSlide, 3000);
el.bind('mouseenter', over).bind('mouseleave', out);
$j(slides[0]).show();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="welcomebanner">
<li>
<h2>testing the text fade</h2>
<p>testing the text fade</p>
</li>
<li>
<h2>Firefox and IE problems</h2>
<p>Firefox and IE problems</p>
</li>
</ul>
</div>
</body>
</html>
This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? hi, I have a form with a tick at the end of each formfield: Code: <label>First Name<a href"#">click</a></label> <input class="text-input medium-input" type="text" id="medium-input" name="FirstName" /> <span class="input-notification success png_bg">Successful message</span> the style is currently set to display:none; I would like to use the FadeIn() method on the input-notification class when someone enters some text at the moment I am trying to test using a link to click on: Code: <script>
$("a").click(function () {
$("tab2").fadeIn(3000, function () {
$("span").fadeIn(100);
});
return false;
});
</script>
this doesn't work as I have 2 tabs and the link sends it back to tab1 Hi, I am using the Javascript Galleriffic in my website, the text fades and casuses the text to not be anti-aliased in IE8 Help please Right i need some help with some code, i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP $piclocation1 $piclocation2 $piclocation3 What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". and so on if you could help me figure out a way around to get this to work i would be ever so greatfull, as i dont know if i got this in the right area as it would contain javascript, php and poss Css! and even if you could point me in the right direction would be helpful! this is the website page i am testing it on if you would like to look at if visually http://www.wolverhampton-wanderers.co.uk/text.php and here is the code: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" type="text/css" href="./wolves.css"/>
<title>Untitled Document</title>
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 1;
while($row1 = mysql_fetch_array($news)){
if($counter == 1)
{
$picture1 = $row1['imageID'];
$getimage1 = "SELECT * FROM news_images WHERE imageID = $picture1";
$image1 = mysql_query($getimage1) or die(mysql_error());
$pic1 = mysql_fetch_array($image1);
$piclocation1 = $pic1['imageFile'];
}
if($counter == 2)
{
$picture2 = $row1['imageID'];
$getimage2 = "SELECT * FROM news_images WHERE imageID = $picture2";
$image2 = mysql_query($getimage2) or die(mysql_error());
$pic2 = mysql_fetch_array($image2);
$piclocation2 = $pic2['imageFile'];
}
if($counter == 3)
{
$picture3 = $row1['imageID'];
$getimage3 = "SELECT * FROM news_images WHERE imageID = $picture3";
$image3 = mysql_query($getimage3) or die(mysql_error());
$pic3 = mysql_fetch_array($image3);
$piclocation3 = $pic3['imageFile'];
}
$counter = $counter + 1;
}
?>
</head>
<body>
<div class="shaddow"><!-- This is the shaddow behind the content -->
<div class="content"> <!-- This is the content and main background -->
<div class="header"><img src="../images/header.jpg"/></div>
<div class="menu">
<div id="nav">
<?php
$cat = "SELECT * FROM `top-menu` ORDER BY 'category' ASC";
$category = mysql_query($cat) or die(mysql_error());
$start = 1;
while($row = mysql_fetch_array($category)){
$submenu = $row['sub-menu'];
if($submenu == '1'){
echo "</li><li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a>";
}
elseif($submenu == '2'){
if($start == 1){
echo "<ul>";
}
echo "<li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a></li>";
$start = $start + 1;
if($submenu !='2'){
echo "</ul></li>";
$start = 1;
}
}
}
echo "</ul></li><a class='nav-end'></a>";
?>
</div>
</div>
<div id="latest-news">
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 0;
echo "<div id='latest-news-image'></div>" .
"<div id='latest-news-header'>Breaking News</div>";
while($row1 = mysql_fetch_array($news)){
echo "<div class='breaking-news'><div class='breaking-news-header'><a href='#'>{$row1['title']}</a></div>" .
"<div class='breaking-news-info'>Posted on {$row1['date']}, by {$row1['author']}</div>" .
"<div class='breaking-news-desc'>{$row1['desc']}</div>" .
"<div class='breaking-news-readmore'><a href='#'>Read More</a></div></div>";
$counter = $counter + 1;
}
?>
</div>
</div>
</div>
</body>
</html>
Hello, I was wondering if anyone could help me with a personal website I am modifying for a friend. He basically has a list of links such as: Home Blog Pictures Links What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place. I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over? Is it possible/recommended to use the follow JQuery? http://ajax.googleapis.com/ajax/libs.../jquery.min.js Thank you for your time Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this: http://piscesmike.com/Pages/recipes/onions.html The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob! Hi Im playing around with some JQuery and have a small problem with my menu. I want the text to always be visible, be on hover and not on hover. Currently, the text is only visible when I hover the <li> item. Check it out at http://cooper.zxq.net Below is my code using to produce the menu. Code: <html>
<head>
<script src="jquery-1.3.1.min.js" type="text/javascript" ></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li.image').css({opacity: 0});
$('li.image').hover(function(){
$(this).animate({opacity: 1},400);
}, function(){
$(this).animate({opacity: 0},400);
});
});
</script>
<style>
.ddsmoothmenu{
background-color:Gray;
width: 100%; height:27px;
margin:0 auto;
padding:0;
}
.ddsmoothmenu ul{z-index:1; margin: 0; padding: 0; list-style-type: none;}
.ddsmoothmenu ul li{position: relative; float: left; }
.ddsmoothmenu a{display:block; color: white; border-right: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 11px Verdana; font-weight:bold;}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: yellow; z-index:50; line-height:27px;}
.image {
line-height:27px;
height:27px;
background:url(images/button.gif) no-repeat right top;
padding-right:30px;
display:inline-block;
}
.image ins {
background:url(images/button.gif) no-repeat left top;
height:27px;
line-height:27px;
display:inline-block;
padding-left:30px;
}
image:hover {background-position:right -155px;}
image:hover ins {background-position:left -155px;}
</style>
</head>
<div id="smoothmenu1" class="ddsmoothmenu ">
<ul>
<li class="image"><a href="#"><ins>Home</ins></a></li>
<li class="image"><a href="#"><ins>Products</ins></a></li>
<li class="image"><a href="#"><ins>Services</ins></a></li>
<li class="image"><a href="#"><ins>Contact Us</ins></a></li>
</ul>
</div>
</html>
Hope anyone can provide some help Thanks! http://bowser.effectgames.com/~jhuck.../multiple.html is there a way to add a tipbox when the mouse hover on the copied text by jquery.the tip box say"the text has been copied" thank you. trying to find a example of when you hover over a image, text appears on the bottom so it could be a picture of a dog, whne you put your mouse over it, text will show in the picture (ie* transparent background for text so it's readable) anywhre where I can find a example of this???? I've been looking around for some time now and can't seem to find anything for what I'd like. I want it to be that when you hover over a segment of text, a box will appear with what in hopes will be more text. And then that box move away if you move your cursor.
Hello, I am trying to do an image swap when hovering over "TEXT" links. For instance, I would like to first have a "mainpic" in a div that would be replaced by either image 1,2 or 3 (depending on if you are hovering over"text link 1,2 or 3). I would use normal rollover "image" swaps, but would prefer to have the "trigger" to be "text" (for SEO reasons). I am just getting familiar with javascript, but do not even know where to begin! I have read multiple forum entries throught google, but could not find any where I could have "multiple" text links. I would so much appreciate it if anyone could please point me in a direction. Sincerely, Buffmin is it possible if you have a div with child divs inside , so i fade out the parent div but the opacity of the child divs stays at 100% ? thank you Hi I have this code: <script type="text/javascript"> function Ajax() { var $http, $self = arguments.callee; if (window.XMLHttpRequest) { $http = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { $http = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { $http = new ActiveXObject('Microsoft.XMLHTTP'); } } if ($http) { $http.onreadystatechange = function() { if (/4|^complete$/.test($http.readyState)) { document.getElementById('ReloadThis').innerHTML = $http.responseText; setTimeout(function(){$self();}, 20000); } }; $http.open('GET', '../inc/record_count.php' + '?' + new Date().getTime(), true); $http.send(null); } } </script> <script type="text/javascript"> setTimeout(function() {Ajax();}, 1000); </script> Can you help me make this make a fade in effect?? |
|||||||