So I almost have my code working how I want, but can't get my animation synched together just right. I am trying to animate a cursor highlighting text, and then clicking on a button. The problem is that the cursor is either too slow or too fast. I am trying to make this dynamic so that no matter how long the text is I can still have the animation synch. I know that it is probably just a math issue, but can't quite get my head around it. Something about trying to match pixels with milliseconds is making my head spin. Please help before I pull out all my hair. Thanks.
Here is the html
<p><span id="container">I need to be highlighted one character at a time</span>
<input id="click" type="button" value="click me"/></p>
<img src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>
Here is the CSS
#container{
font-size: 16px;
margin-right: 10px;
}
.highlight{
background: yellow;
}
img{
position: relative;
top: -10px;
}
And the javascript
function highlight(){
var text = $('#container').text(); //get text of container
$('#click').css('border','none'); //remove the border
$('img').css('left', '0px'); //reset the cursor left
$('img').animate({left: $('#container').width() + 40}, text.length*70); //animation of cursor
$('#container').html('<span class="highlight">'+text.substring(0,1)+'</span><span>'+text.substring(1)+'</span>'); //set the first html
(function myLoop (i) {//animation loop
setTimeout(function () {
var highlight = $('.highlight').text();
var highlightAdd = $('.highlight').next().text().substring(0,1);;
var plain = $('.highlight').next().text().substring(1);
$('#container').html('<span class="highlight">'+highlight+highlightAdd+'</span><span>'+plain+'</span>');
if (--i) myLoop(i);// decrement i and call myLoop again if i > 0
}, 70)
})(text.length);
setTimeout(function () {
$('#click').css('border','1px solid black');
}, text.length*85);
}
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*110);
//clearInterval(intervalID);
Here is a link to the fiddle I have been playing around in.
This will probably get me down voted but maybe you will get some better idea...
Fiddle Here
$(document).ready(function() {
$('p').click(function(){
$('span').animate({'width':'100'},1000);
$('.cursor').animate({marginLeft: 100},1000);
});
});
Thanks to Dejo, I was able to modify my code to make this work exactly as I wanted. It was much easier to increase the width of one span rather than trying to expand one span while shrinking another. This also allowed me to have both the cursor moving and the span width increasing animations run in sync.
The HTML
<p><span id="highlight"></span><span id="container">I need to be highlighted one character at a time</span><input id="click" type="button" value="click me"/></p>
<img id="cursor" src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>
The CSS
p{
position: relative;
font-size: 16px;
}
#highlight{
position: absolute;
background-color:yellow;
height:20px;
z-index:-50;
}
#cursor{
position: relative;
top: -10px;
}
#click{
margin-left; 10px;
}
And the javascript
function highlight(){
var textLength = $('#container').text().length;
$('#click').css('border','none'); //remove the border
$('#cursor').css('left', '0px'); //reset the cursor left
$('#highlight').width(0);
$('#highlight').animate({width: $('#container').width()}, textLength * 70);
$('#cursor').animate({left: '+='+$('#container').width()} , textLength * 70, function(){
$('#cursor').animate({left: '+=30'} , textLength * 20);
});
setTimeout(function () {
$('#click').css('border','1px solid black');
}, textLength*100);
}
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*120);
//clearInterval(intervalID);
I realize it's quite a bit late, but here's a bit of help (for future reference).
The JQuery animate function is, by default, set an easing of swing, which means that the speed of the animation will vary throughout (see here).
To (kind of) fix the problem, I added the linear option to the animate method for the cursor, and increased its speed slightly.
You can see this new version at JSFiddle.
However, since the setTimeout loop can be slowed for some reasons, the animation may not be in sync.
Related
I would like to make a Text run from left to right in a loop. Here is the fiddle with my attempt:
https://jsfiddle.net/9Lruxym8/33/
I started with css #keyframes but I think I need the width of the text itself if I want the text to run seamlessly. My idea was to write down the text two times and once the div with the texts has run exactly halfway, the animation starts again.
After #keyframes didn't work, I tried jQuery animation. It did work somewhat but didn't run smoothly. Now I'd like to do it via transition. I thought a combination of intervals and timeouts could do the trick but I still don't get it to work - and now, I don't know why. Does anyone have a hit for me?
function runText() {
var text_width = $('#runningP').width()/2;
console.log(text_width)
setInterval(function(){
console.log("interval");
$('.text').css({'transition':'margin-left 5s'});
$('.text').css({'margin-left':'-' + text_width + 'px'});
moveBack();
}, 3000);
function moveBack() {
console.log("timeout")
setTimeout(function(){
$('.text').css({'transition':'none'});
$('.text').css({'margin-left': 0});
}, 3000);
}
}
runText();
I've recently made a bit of custom code for this functionality.
Looking at my code, it seems a bit much having essentially 3 "levels" (.scrollTextWrap > .scrollingText > .scrollContent) but this was the structure I ended up using to get a clean and consistent effect.
I've added in an initialiser too so that you could simply add the scrollMe class and have them setup the html for you
In the snippet I've added a .parentContainer purely to show how it works when constrained
$(document)
.ready(function(){
// check that scrollingText has 2 scrollContent element
$('.scrollMe')
.each(function(){
initScrollingText($(this));
});
});
function initScrollingText($this){
// store text
var text = $this.text();
// empty element
$this.html(null);
var $wrap = $('<div class="scrollTextWrap" />'),
$text = $('<div class="scrollingText" />'),
$content = $('<div class="scrollContent" />');
// set content value
$content.text(text);
// duplicate content
$text
.append($content)
.append($content.clone());
// append text to wrap
$wrap.append($text)
// add $wrap to DOM
$wrap.insertAfter($this);
// remove old element
$this.remove();
}
/* to simulate width constraints */
.parentContainer {
width: 140px;
position:relative;
overflow:hidden;
}
.scrollTextWrap {
position:relative;
width:auto;
display:inline-block;
}
.scrollingText {
display: flex;
position:relative;
transition:left 0.1s;
animation: scrollText 5s infinite linear;
}
.scrollContent {
white-space: nowrap;
padding-right:5px;
}
#keyframes scrollText {
0% { left:0 }
100% { left:-50% }
}
<div class="parentContainer">
<div class="scrollMe">Content you want to scroll goes here</div>
<!-- alternatively you can just structure the html -->
<div class="scrollTextWrap">
<div class="scrollingText">
<div class="scrollContent">Content you want to scroll goes here</div>
<div class="scrollContent">Content you want to scroll goes here</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have an animated skills bar on my website, which fires when the section scrolls into view. Everything is working well so far.
Except when the viewport changes/window resizes the animated bars won't adjust to it and will be too long or to short.
I tried to solve this problem with
$(window).resize(function(){location.reload();
but on mobile viewport it keeps refreshing the page even though I'm just scrolling.
I already searched the net to see if there is a way to just reload the specific jquery function, but couldn't find anything. Or to be honest I didn't quite understood I guess, and couldn't get it working.
Here is what I found: https://css-tricks.com/forums/topic/reload-jquery-functions-on-ipad-orientation-change/
I read there is a way to make the website reload the whole js file. But since I still have other animations on my page, I don't know if this is the best way to do it.
I'm glad if anyone could help me with this. I'm very new to coding and my js/jquery knowledge is still very limited/non-existent.
here is my script for the bar animation
var $meters = $(".meter > span");
var $section = $('#skills .meter');
var $queue = $({});
function loadDaBars() {
$meters.each(function() {
var $el = $(this);
var origWidth = $el.width();
$el.width(0);
$queue.queue(function(next) {
$el.animate({width: origWidth}, 800, next);
});
});
}
$(document).bind('scroll', function(ev) {
var scrollOffset = $(document).scrollTop();
var containerOffset = $section.offset().top - window.innerHeight;
if (scrollOffset > containerOffset) {
loadDaBars();
$(document).unbind('scroll');
}
});
the width for the skillbar is defined via div class and span in %.
Maybe there is a css solution to this?
edit: this is how my html and css code looks like
.meter {
background-color: hsla(54, 73%, 95%, 1);
vertical-align: bottom;
width: 100%;
position: relative;
}
.meter>span {
display: block;
background-color: rgb(241, 233, 166);
position: relative;
overflow: hidden;
}
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="meter">
<span style="width: 50%"></span>
</div>
You remove the style property of the bar once the animation has finished. This way the css rule will apply again:
$el.animate({width: origWidth}, {duration: 800, complete: function (){$el.removeAttr('style')}}, next);
(Assuming the width defined by the css is responsive)
I have a scrollable div container fits multiple "pages" (or div's) inside of it's container.
My goal is to, at any given moment, figure out where inside my red container does it reach the top of my scrollable container. So it can be a constant on scroll event, or a button that triggers this task.
So for example. If I have a absolute div element inside one of my red boxes at top:50px. And if I scroll to where that div element reaches the top of my scrollable container. The trigger should say that I am at 50px of my red container.
I'm having a hard time grasping how to accomplish this but I've tried things like:
$("#pageContent").scroll(function(e) {
console.log($(this).scrollTop());
});
But it doesn't take into account the separate pages and I don't believe it it completely accurate depending on the scale. Any guidance or help would be greatly appreciated.
Here is my code and a jsfiddle to better support my question.
Note: If necessary, I use scrollspy in my project so I could target which red container needs to be checked.
HTML
<div id="pageContent" class="slide" style="background-color: rgb(241, 242, 247); height: 465px;">
<div id="formBox" style="height: 9248.627450980393px;">
<div class="trimSpace" style="width: 1408px; height: 9248.627450980393px;">
<div id="formScale" style="width: 816px; -webkit-transform: scale(1.7254901960784315); display: block;">
<form action="#" id="XaoQjmc0L51z_form" autocomplete="off">
<div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_1">
<div class="formContent">
<div class="formBackground">
<div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>
</div>
</div>
</div>
<div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_2">
<div class="formContent">
<div class="formBackground"><div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">This should still say 50px</div></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
CSS
#pageContent {
position:relative;
padding-bottom:20px;
background-color:#fff;
z-index:2;
overflow:auto;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#formBox {
display: block;
position: relative;
height: 100%;
padding: 15px;
}
.trimSpace {
display: block;
position: relative;
margin: 0 auto;
padding: 0;
height: 100%;
overflow: hidden;
}
#formScale::after {
display: block;
content:'';
padding-bottom:5px;
}
#formScale {
position:relative;
width:816px;
margin:0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform-origin: 0 0;
}
.formContainer {
position:relative;
margin : 0 auto 15px auto;
padding:0;
}
.formContent {
position:absolute;
width:100%;
height:100%;
}
.formBackground {
width:100%;
height:100%;
background-color:red;
}
JS
var PAGEWIDTH = 816;
$(window).resize(function (e) {
zoomProject();
resize();
});
function resize() {
$("#pageContent").css('height', window.innerHeight - 45 + 'px');
}
function zoomProject() {
var maxWidth = $("#formBox").width(),
percent = maxWidth / PAGEWIDTH;
$("#formScale").css({
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
});
$(".trimSpace").css('width', (PAGEWIDTH * percent) + 'px');
$("#formBox, .trimSpace").css('height', ($("#formScale").height() * percent) + 'px');
}
zoomProject();
resize();
EDIT:
I don't think I am conveying a good job at relaying what I want to accomplish.
At the moment there are two .formContainer's. When I scroll #pageContainer, the .formContainer divs move up through #pageContainer.
So what I want to accomplish is, when a user clicks the "ME" button or #click (as shown in the fiddle below), I'd like to know where in that particular .formContainer, is it touching the top of #pageContainer.
I do use scroll spy in my real world application so I know which .formContainer is closest to the top. So if you just want to target one .formContainer, that is fine.
I used these white div elements as an example. If I am scrolling #pageContainer, and that white div element is at the top of screen as I am scrolling and I click on "ME", the on click trigger should alert to me that .formContainer is touching the top of #pageContainer at 50px from the top. If, the the red container is just touching the top of #pageContainer, it should say it is 0px from the top.
I hope that helps clear up some misconception.
Here is an updated jsfiddle that shows the kind of action that I want to happen.
I am giving this a stab because I find these things interesting. It might just be a starting point since I have a headache today and am not thinking straight. I'd be willing to bet it can be cleaned up and simplified some.
I also might be over-complicating the approach I took, getting the first visible form, and the positioning. I didn't use the getBoundingClientRect function either.
Instead, I approached it trying to account for padding and margin, using a loop through parent objects up to the pageContent to get the offset relative to that element. Because the form is nested a couple levels deep inside the pageContent element you can't use position(). You also can't use offset() since that changes with scroll. The loop approach allowed me to factor the top margin/padding in. I haven't looked at the other solutions proposed fully so there might be a shorter way to accomplish this.
Keeping in mind that the scale will affect the ACTUAL location of the child elements, you have to divide by your scale percentage when getting the actual location. To do that I moved the scalePercentage to a global var so it was usable by the zoom function and the click.
Here's the core of what I did. The actual fiddle has more logging and junk:
var visForm = getVisibleForm();
var formTop = visForm.position().top;
var parents = visForm.parentsUntil('#pageContent');
var truOffset = 0;
parents.each(function() {
truOffset -= $(this).position().top;
});
// actual location of form relative to pageContent visible pane
var formLoc = truOffset - formTop;
var scaledLoc = formLoc / scalePercent;
Updated Fiddle (forgot to account for scale in get func): http://jsfiddle.net/e6vpq9c8/5/
If I understand your question correctly, what you want is to catch when certain descendant elements reach the top of the outer container, and then determine the position of the visible "page" (div with class formContainer) relative to the top.
If so, the first task is to mark the specific elements that could trigger this:
<div class='triggerElement' style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>
Then the code:
// arbitrary horizontal offset - customize for where your trigger elements are placed horizontally
var X_OFFSET = 100;
// determine once, at page load, where outer container is on the page
var outerContainerRect;
$(document).ready(function() {
outerContainerRect = $("#pageContent").get(0).getBoundingClientRect();
});
// when outer container is scrolled
$("#pageContent").scroll(function(e) {
// determine which element is at the top
var topElement = $(document.elementFromPoint(outerContainerRect.left+X_OFFSET, outerContainerRect.top));
/*
// if a trigger element
if (topElement.hasClass("triggerElement")) {
// get trigger element's position relative to page
console.log(topElement.position().top);
}
*/
var page = topElement.closest(".formContainer");
if (page.length > 0) {
console.log(-page.get(0).getBoundingClientRect().top);
}
});
EDIT: Changed code to check formContainer elements rather than descendant elements, as per your comment.
http://jsfiddle.net/j6ybgf58/23/
EDIT #2: A simpler approach, given that you know which formContainer to target:
$("#pageContent").scroll(function(e) {
console.log($(this).scrollTop() - $("#xzOwqphM4GGR_1").position().top);
});
http://jsfiddle.net/rL4Ly3yy/5/
However, it still gives different results based on the size of the window. This seems unavoidable - the zoomProject and resize functions are explicitly resizing the content, so you would have to apply the inverse transforms to the number you get from this code if you want it in the original coordinate system.
I do not fully understand what it is that you are needing, but if i am correct this should do the trick
$("#pageContent").scroll(function(e) {
// If more then 50 pixels from the top has been scrolled
// * if you want it to only happen at 50px, just execute this once by removing the scroll listener on pageContent
if((this.scrollHeight - this.scrollTop) < (this.scrollHeight - 50)) {
alert('it is');
}
});
ScrollHeight is the full height of the object including scrollable pixels.
ScrollTop is the amount of pixels scrolled from the top.
You can use waypoints to detect the position of divs based on where you're scrolling.
Here is a link to their official website's example: http://imakewebthings.com/waypoints/shortcuts/inview/
I have a basic HTML Slider element. What I wish to produce is simple - when the slider is at one end a simple happy face is output. When it is at the other end, a simple sad face is output.
The key thing I want is that there will be a smooth transition from one side of the animation to the other - so the smiley face will go through different phases of indifference and slight happiness/slight sadness.
Let's say there is a float of between 1 and 10 output from the slider, which corresponds to the displayed image's "happiness".
How would you tackle this problem? I have tried searching and googling, but with no good results. All technologies acceptable - particularly interested in how the image/animation would be stored.
You could use CSS's transform: rotateX to do what you'd want. In my version I also used HTML5's input with type="range", but if you wanted to affect old browsers you could use the same approach with a more global slider. The demo involves using two images, one for the face and background and one for the lips, but if you like the technique you can apply it to pure CSS the same way. Just make sure you include all browser prefixes you want in the javascript
Live Demo Here
/* HTML */
<div id='slimey'>
<div id='lips'></div>
</div>
<input id="smileSlide" type="range" onchange="changeSmile(this)" value="0" />
/* Javascript */
var lips = document.getElementById('lips');
function changeSmile(slider) {
var sliderVal = slider.value,
rotateDegree = - sliderVal * 1.8;
lips.style.webkitTransform = "rotateX(" + rotateDegree + "deg)";
lips.style.transform = "rotateX(" + rotateDegree + "deg)";
}
/* CSS */
#slimey {
margin:auto;
background:url(http://i.imgur.com/LGQMhc3.jpg);
background-size: 100% 100%;
height:100px;
width:100px;
position:relative;
}
#lips {
width:50px;
height:20px;
position:absolute;
top:calc(70% - 10px);
left:calc(50% - 25px);
background:url(http://i.imgur.com/20EmUM7.gif);
background-size: 100% 100%;
-webkit-transform:rotateX(0deg);
transform:rotateX(0deg);
}
#smileSlide {
width:100px;
position:absolute;
left:calc(50% - 50px);
}
Inspired by Marco Barria's (this guy has some awesome projects) single element flying bird
If you wanted to make the middle state more visible, you could toggle the display of a line in the middle range like this demo does. Like the rest of this answer it's only an approximate solution, but I think it shows the technique well. If you wanted to get super fancy you could even add a fade in/out for the line to make it appear a tiny bit smoother
I have changed Zeaklous answer by using pure css and js (without any images or rotate)
http://jsfiddle.net/sijav/PVvc4/3/
<!--HTML-->
<div id='slimey'>
<div id='leye' class='eye'></div>
<div id='reye' class='eye'></div>
<div id='lips'></div>
</div>
<input id="smileSlide" type="range" onchange="changeSmile(this)" value="0" />
//Java Script
var lips = document.getElementById('lips');
function changeSmile(slider) {
var lh = lips.style.height, slide=0;
if ((50 - slider.value) > 0){
slide = (50 - slider.value);
lips.style.borderTop = "2px black solid";
lips.style.borderBottom = "none";
}
else {
slide = (slider.value - 50);
lips.style.borderBottom = "2px black solid";
lips.style.borderTop = "none";
}
lips.style.height = slide * 0.4 + "px" ;
lips.style.top = "calc(70% + " + (- slide) * 0.2 + "px" ;
}
/**CSS**/
#leye{
left:25%;
}
#reye{
right:25%;
}
.eye{
position:absolute;
background:black;
border-radius:100%;
height:15px;
width:15px;
top:20px;
}
#slimey {
margin:auto;
background:Yellow;
border-radius:100%;
height:100px;
width:100px;
position:relative;
}
#lips {
width:50px;
height:20px;
position:absolute;
top:calc(70% - 10px);
left:calc(50% - 25px);
background:transparent;
border-top:2px black solid;
-webkit-transform:rotateX(0deg);
border-radius:100%;
transform:rotateX(0deg);
}
#smileSlide {
width:100px;
position:absolute;
left:calc(50% - 50px);
}
EDIT: a small difference in lips moving here http://jsfiddle.net/sijav/PVvc4/4/
For fun, I hacked up a little Webkit-only version in pure CSS (no images or JavaScript) over lunch—here's a demo. I wouldn't necessarily recommend this approach, but I couldn't resist giving it a whirl!
It's a pretty simple approach. Instead of a slider I used a group of radio buttons, which allows you to use the :checked pseudo-class to change the colours and shape of the mouth depending on the selected value. The mouth shape is described using just height and border-radius. For example:
#feel-0:checked ~ #mouth {
border-radius: 30px 30px 0 0;
height: 20px;
margin-top: -5px;
}
The explanatory text is just the label field for the selected radio button. Initially all labels are hidden, but once a field is checked the adjacent label becomes visible:
#happiness input:checked + label {
visibility: visible;
}
You can change which field is selected (visually moving the slider left or right) using your arrow keys—this is built-in behaviour for a radio group.
With a little work, you could adapt this to make the slider look better in non-WebKit browsers; however, it may be janky in some older browsers, and you can't drag the slider left or right. For production I would use a JavaScript slider (e.g. one of the many jQuery options available) and swap the CSS pseudo-class magic for a smattering of JS and a handful of classes.
You could use something like Raphael if you can draw the face in SVG. If you were to keep the same circle face and just morph the mouth for example. This would animate between the shapes. Not quite sure if thats what you mean. This is my 2 second terrible mouth path.
var paper = Raphael( "canvas_container",400,400);
paper.circle(280, 210, 150);
// create the 2 paths to animate between in some app like inkscape
var pathStr1 = "m385,255l-197,-3l40,57l88,1l35,0l34,-55z",
pathStr2 = "m207,268l162,-1l-33,-45l-41,-2l-46,-1l-32,20l-10,29z";
var path = paper.path(pathStr1).attr({fill: "yellow", "stroke-width": 3});
setTimeout(function(){path.animate({path: pathStr2}, 3000, "linear");}, 1000);
There's a fiddle at http://jsfiddle.net/YUhHw/1/ and tutorial with better examples (code above based part on) at http://cancerbero.mbarreneche.com/raphaeltut/#sec-animation and nice examples at http://raphaeljs.com/animation.html I guess you would need to change the setTimeout to correspond to your slider.
Just use a png face without a mouth, and several tween mouths that switch based on the location along the slider with Javascript. Store the files in an array, and call to them from a timed function to check the faces position. Simple and lightweight.
var mouthArray = new Array('frown','half_frown','half_smile','smile');
var face = document.getElementById('face');
var faceLoc = parseInt(face.style.left);
function changeMouth() {
if(faceLoc<10)
{theMouth.setAttribute('src',mouthArray[0]);}
if(faceLoc>10,faceLoc<=19)
{theMouth.setAttribute('src',mouthArray[1]);}
if(faceLoc>20,faceLoc<=29)
{theMouth.setAttribute('src',mouthArray[2]);}
if(faceLoc>30,faceLoc<40)
{theMouth.setAttribute('src',mouthArray[3]);}
}
Something along those lines, if given enough iterations for the length of the slider, should get you a decently 'smooth' effect.
I've asked this guestion before. But now I'll try to be a bit more specific.
I've trying to make a background fade in when you mouse over a box. I've tried 2 different options.
Option 1:
Box1 is the box it mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i just go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. Is there a way you can stop it?
Content is a text that changes in a contentbox when I mouseover. This worksfine.
$("#box1").mouseover(function(){
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
});
Option 2:
Here i add the class hover2 and asks it to fadeín and fadeout. But this doesn't work at all. Somtimes it even removes everything on the side when i take the mouseout of the box.
$("#box2").mouseover(function(){
$("#background").addClass("hover2").fadeIn("slow")
$("#content").html(box3);
});
$("#box2").mouseout(function(){
$("#background").removeClass("hover2").fadeOut("slow")
$("#content").html(content);
});
I Use jquery ui.
I really hope someone can help me!
You can also try to make small changes in the markup/CSS.
HTML:
<div id="box">
<div id="background"></div>
<div id="content"></div>
</div>
CSS:
#box {
position: relative;
/* ... */
}
#background {
position: absolute;
display: none;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url(...);
z-index: -1;
}
JavaScript:
$("#box").hover(function() {
$("#background").fadeIn();
}, function() {
$("#background").stop().fadeOut();
});
DEMO: http://jsfiddle.net/bRfMy/
Try add a variable to control the execution of the effect only when that variable has a certain value. And modify its value when the effect was executwed.
Something like this:
var goeft = 0;
$("#box1").mouseover(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
// sets its value back to 0 if you want the next mouseover execute the effect again
goeft = 0;
});