Ефектно появяване на див

M

MontefuckeR

Registered
Как се прави ефектно появяване на див ? не да изкочи изведнъж а да се покаже леко по леко :shock: с жс
 
hrischo каза:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
Увеличете...
Хубаво ама неможе ли някой да ми напише едно такова максимално опростено за да видя кое как работи
 
MontefuckeR каза:
hrischo каза:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
Увеличете...
Хубаво ама неможе ли някой да ми напише едно такова максимално опростено за да видя кое как работи
Увеличете...

е кое му е сложното?
в <head> секцията слагаш тоя код:

Код: 
<script type="text/javascript" src="animatedcollapse.js"></script>

като разбира се за целта трябва да имаш нужния animatedcollapse.js

после отиваш в бодито и слагаш тоя код:

Код: 
<p><b>Example 1:</b></p>

<a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>
<div id="dog" style="width: 300px; height: 110px; background-color: #99E0FB;">


<h3>Content inside DIV!</h3>
<h4>Note: CSS height attribute defined</h4>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("dog", 1000, false)

</script>



<p><b>Example 2:</b></p>

<a href="javascript:collapse2.slideit()">Show/ Hide DIV</a>
<div id="cat" style="width: 300px; background-color: #99E0FB;">


<div style="padding: 0 5px">
<h3>Content inside DIV!</h3>
<h3>Content inside DIV!</h3>
<h4>Note: No CSS height attribute defined. Persistence enabled.</h4>
</div>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)

</script>




<p><b>Example 3:</b></p>

<a href="javascript:collapse3.slidedown()">Slide Down</a> || <a href="javascript:collapse3.slideup()">Slide Up</a>
<div id="fish" style="width: 300px; height: 150px; background-color: #99E0FB;">


<h3>Content inside DIV!</h3>
<h4>Note: DIV set not to collapse initially. Note that if "enablepersist" is enabled, cookie value overrides this setting.</h4>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse3=new animatedcollapse("fish", 1000, false, "block")

</script>

като разбира се си правиш промени по съдържанието.

тва е
 
SandPrince каза:
аз обаче бих предпочел ей тоя код:

http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
Увеличете...
еми обясни ми функциите коя точно прави ефекта при скриване
 
MontefuckeR каза:
SandPrince каза:
аз обаче бих предпочел ей тоя код:

http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
Увеличете...
еми обясни ми функциите коя точно прави ефекта при скриване
Увеличете...

всичко ти идва от двата JS файла. имаш и един CSS стил приложен но той не е важен.
ако си забелязал също и има един допълнителен JS код в head секцията:

Код: 
<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
	headerclass: "mypets", //Shared CSS class name of headers group
	contentclass: "thepet", //Shared CSS class name of contents group
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
	oninit:function(expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

//Initialize 2nd demo:
ddaccordion.init({
	headerclass: "technology", //Shared CSS class name of headers group
	contentclass: "thelanguage", //Shared CSS class name of contents group
	collapseprev: false, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: false, //persist state of opened contents within browser session?
	toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
	oninit:function(expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

</script>

виж един ред, примерно този:
headerclass: "mypets", //Shared CSS class name of headers group

това е инклуднато в заглавието на дива ти:

<h3 class="mypets">Dogs</h3>

същото е и за самия див:

има ред в JS код-а:
contentclass: "thepet", //Shared CSS class name of contents group

и пак инклуднато в дива:
<div class="thepet">
съдържанието на дива...
</div>

разбрали сега. почти същото (даже си е същото) както задаваш стил на връзка примерно от CSS код в head-a.
т.е. когато инклуднеш съдържанието от JS кода в дива ти той приема зададената функция и я изпълнява.


дано си ме разбрал :?:
 
охоо ти ако искаш да разбереш как го прави почвай да учиш джава скрипт не е така лесно за разбиране :)
 
shterev каза:
охоо ти ако искаш да разбереш как го прави почвай да учиш джава скрипт не е така лесно за разбиране :)
Увеличете...
Най после един да ме разбере... започнал съм да го уча ама ме човърка този ефект...
 
Зависи до какво ниво си стигнал. Ето ти още един такъв ефект, който аз използвам, може да ти се види по-лесен. http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content_slide
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе