Помощ за JS код

F

freshbg1

Registered
Добро утро на всички!
Имам следния код за onMouseOver:
Код: 
	<script type="text/javascript">
	</script>

<script>var firsttext='text1'</script>
<script>var secondtext='text2'</script>

<div onmouseover="writetext(firsttext)"><a href="#">виж</a></div>
<div onmouseover="writetext(secondtext)"><a href="#">виж</a></div>

<div id="textarea">text po default</div>

Може ли да го направите така, че на това onMouseOver да се сложи примерно със jQuery анимиран fade ефект? Т.е. когато минеш със мишката да си прави onMouseOver-а както трябва, но да се появява и изчезва плавно (за информация във тези div-ове ползвам iframes а не текст както съм постнал тук). Благодаря предварително. +1 :?:
 
виж това върши ли ти работа

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">

   var firsttext='text1'
   var secondtext='text2'
   </script>

<div onmouseover="writetext(firsttext)"><a href="#">виж</a></div>
<div onmouseover="writetext(secondtext)"><a href="#">виж</a></div>

<div id="textarea" class="opa">text po default</div> 
</body>
</html>
 
Намерих това:

Код: 
$(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); //Това слага  opacity клас thumbs да намалява на 60% когато страницата зареди 

$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // При hover opacity-то стаа на 100%
},function(){
$(this).fadeTo("slow", 0.6); // А това при мouseout го слага на 60%
});
});

http://cssbeauty.com/skillshare/discussion/1593/jquery-fade-in-on-mouse-over/

Демо: http://aintyomamasblog.com/test/hover/
 
а това може би ще ти свърши перфектна работа, малко го промених според твоите изисквания

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<style>
/*
change style attributes as needed - these were
simply for testing purposes
*/
#imgs {
position:absolute;
left: 6px;
top: 6px;
}
#txt {
position:absolute;
left: 256px;
top: 256px;
}
/* text contents go in here */
#containerCurrent {
border: 1px solid red;
color:red;
filter:alpha(opacity=100);
opacity:1;
font-size:25px;
position:absolute;
left: 6px;
top: 6px;
}
#containerNext {
border: 1px solid red;
color:red;
display: block;
filter:alpha(opacity=0);
opacity:0;
font-size:25px;
position:absolute;
left: 6px;
top: 6px;
}
</style>
<script type="text/javascript">
// utility overhead
var ua = navigator.userAgent;
var isIE = -1 != ua.indexOf('MSIE');

function get(eid) {
var e = document.getElementById( eid );
return e;
}

// contents to display - each image will reference
// the corresponding text by it index in the array
var contentsArray = [
'text1',
'text2'
];

// how long the entire fade process requires
var fadeRate = 1000; // msecs
// intializations
var currentContent = '';
var nextContent;

function fade(nIdx) {
// assign in-fading content by requested index
nextContent = contentsArray[nIdx];
// put next content in currently invisible container
get( 'containerNext' ).innerHTML = nextContent;
// local rate is 100th of overall rate of fade
var rate = fadeRate/100;
for (var i = 1; i < 101; i++) {
// queue fading commands
setTimeout('fadeOut(' + i + ')', rate*i);
setTimeout('fadeIn(' + i + ')', rate*i);
}
// queue final cleanup commands
setTimeout('finishFade(' + nIdx + ')', fadeRate);
}

function fadeIn(i) {
// increase opacity of in-fading, next content
var s = get( 'containerNext' ).style;
if (isIE) s.filter = 'alpha( opacity=' + i + ')';
else s.opacity = '' + .01*i;
}

function fadeOut(i) {
// decrease opacity of out-fading, next content
var s = get( 'containerCurrent' ).style;
if (isIE) s.filter = 'alpha( opacity=' + (100 - i) + ')';
else s.opacity = '' + .01*(100 - i);
}

function finishFade(nIdx) {
// reset current content to that which faded in
get('containerCurrent').innerHTML = nextContent;
var cs = get( 'containerCurrent' ).style;
var ns = get( 'containerNext' ).style;
// reset opacities to make current container again
// visible - contents of next no longer matter
if (isIE) {
cs.filter = 'alpha( opacity=100 )';
ns.filter = 'alpha( opacity=0 )';
}
else {
cs.opacity = '1';
ns.opacity = '0';
}
}
</script >
</head>

<body>
<div id="imgs">

<div onmouseover="fade(0)" /><a href="#">виж</a></div>
<div onmouseover="fade(1)" /><a href="#">виж</a></div>
</div>
<div id="txt">
<div id="containerCurrent"></div>
<div id="containerNext"></div>
</div>
</body>
</html>
 
embaka каза:
виж това върши ли ти работа

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">

   var firsttext='text1'
   var secondtext='text2'
   </script>

<div onmouseover="writetext(firsttext)"><a href="#">виж</a></div>
<div onmouseover="writetext(secondtext)"><a href="#">виж</a></div>

<div id="textarea" class="opa">text po default</div> 
</body>
</html>
Увеличете...

Твоя код е точно това което ми трябва, тъй като работи със моя JS код, обаче може ли да се зададе някаква скорост на появяване? Примерно плавно да се появява със определеня скорост да кажем 2 секунди?
 
http://api.jquery.com/fadeTo/

има duration (Продължителност)

durationA string or number determining how long the animation will run.

нз дали щe свърши работа , провери функцията от сайта :)
 
Добре, можете ли да ми помогнете върху този код:
Код: 
	<script type="text/javascript">
	</script>
да сложите fadein и out ? Не разбирам въобще от html ...
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе