ورود

View Full Version : سوال: ایجاد حرکت بین لینک ها


mmojbo
پنج شنبه 13 بهمن 1390, 04:08 صبح
با سلام به دوستان
نمی دونم عنوانی که برای سوالم گذاشتم درسته یا نه
اگه اشتباه نوشتم و یا مفهوم نیست, عذر می خوام

من 4 بخش در منو دارم
می خوام با کلیک روی هر بخش منو، در یک بخش اصلی (DIV), متن مربوط به اون بخش با یه افکت خاص
(مثلا Fade) تغییر کنه.
یه چیزی تو مایه های این Vcard ها.

ممنون میشم کسی کمکم کنه
zootos
پنج شنبه 13 بهمن 1390, 11:47 صبح
این کد کمکتون می کنه فک کنم مشکلتون رو حل کنه


<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>

<p>This paragraph has a fast animation.</p>
<div id="log"></div>

<script>
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
});
</script>

</body>
</html>
e107365
پنج شنبه 13 بهمن 1390, 12:17 عصر
برای هر بخش منو یک div بساز و براشون ID بزار و آی دی اون دیو ها رو تو یکی از صفات لینک های منو قرار بده. div هایی که ساختی رو با display: none مخفی کن و فقط اولین گزینه رو display: block بزن یعنی همونی که می خوایی اول نشون داده بشه. حالا با کلیک بر روی هر لینک از صفات اون لینک آی دی اون لایه ای که قراره محتویاتش نشون داده بشه رو در بیار و اون لیاه رو با متود animate نشون بده:
$($('.menu li a').attr('rel')).animate({opacity: 1}, 'slow');
با فرض این که ما آی دی دیو رو تو rel گذاشتیم.
mmojbo
جمعه 14 بهمن 1390, 20:19 عصر
با تشکر از zootos و e107365 عزیز
ممنون از اینکه راهنمایی کردین

e107365 یه خواهشی دارم
اگه می تونی میشه بیشتر توضیح بدی
یا یه نمونه کامل بزاری

خیلی ممنونم
e107365
شنبه 15 بهمن 1390, 00:10 صبح
این تصویر کمکت می کنه:
http://itpeach.net/msm/tabed.jpg

اون قرمزها رو selected بزن تا هنگام لود display اون رو block بکنی.
mmojbo
شنبه 15 بهمن 1390, 01:08 صبح
e107365 عزیز، ممنونم از اینکه وقت میزاری و کمکم می کنی
ببین این کدی که من نوشتم

<div class="mobo_menu">
<ul class="ca-menu">
<li>
<a href="#about-me-" rel="about-me-" >
<span class="ca-icon">A</span>
<div id="menu_skills" class="ca-content">
<h2 class="ca-main">About me</h2>
<h3 class="ca-sub">history of life</h3>
</div>
</a>
</li>
<li>
<a href="#article-" rel="article-">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main">Article</h2>
<h3 class="ca-sub">In different topic</h3>
</div>
</a>
</li>
</ul>
</div>

<div class="mobo_content">
<div id="about-me-" class="figure" style="display: block;">
<h3>About me</h3>
<div class="intro">Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
</div>
</div>

<div id="article-" class="figure" style="display: none;">
<h3>Article</h3>
<div class="intro">Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
</div>
</div>
</div>


این بخش از راهنمایی تو میشه بنویسی

الا با کلیک بر روی هر لینک از صفات اون لینک آی دی اون لایه ای که قراره محتویاتش نشون داده بشه رو در بیار و اون لیاه رو با متود animate نشون بده:

بازم خیلی ممنون
e107365
شنبه 15 بهمن 1390, 14:18 عصر
<div class="mobo_menu">
<ul class="ca-menu">
<li>
<a href="#about-me-" rel="about-me-" >
<span class="ca-icon">A</span>
<div id="menu_skills" class="ca-content">
<h2 class="ca-main">About me</h2>
<h3 class="ca-sub">history of life</h3>
</div>
</a>
</li>
<li>
<a href="#article-" rel="article-">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main">Article</h2>
<h3 class="ca-sub">In different topic</h3>
</div>
</a>
</li>
</ul>
</div>

<div class="mobo_content">
<div id="about-me-" class="figure selected" >
<h3>About me</h3>
<div class="intro">Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
</div>
</div>

<div id="article-" class="figure" >
<h3>Article</h3>
<div class="intro">Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
</div>
</div>
</div>

$('.ca-menu li a').click(function() {
$('.selected').hide();
$('#'+$(this).attr('rel')).show();
});

.figure {display:none}
.selected {display:block}

گود لاک.
mmojbo
شنبه 15 بهمن 1390, 15:17 عصر
ممنون از کمکتون
فقط افکت نداره
من کدی رو که اول گفتین گذاشتم

$($('.menu li a').attr('rel')).animate({opacity: 1}, 'slow');


جواب نداد بعد اینجوری تغییرش دادم ول بازم نشد

$('#'+$(this).attr('rel')).animate({opacity: 1}, 'slow');

؟؟
بازم ممنون
e107365
شنبه 15 بهمن 1390, 16:39 عصر
$('.ca-menu li a').click(function() {
$('.selected').hide();
$('#'+$(this).attr('rel')).animate({opacity: 1}, 'slow');
});
mmojbo
شنبه 15 بهمن 1390, 21:02 عصر
ممنون ولی همونطور که نوشتم این کد جواب نمیده

اگر در خط دوم .selected باشه جواب نمیده
ولی اگه .figure باشه در حالت استفاده از show() نشون میده
ولی animate کار نمیکنه و هیچی نشون نمیده
؟؟

یعنی الان از کد استفاده می کنم ولی افکتی نداره
<script type="text/javascript">
$('.ca-menu li a').click(function() {
$('.figure').hide();
$('#'+$(this).attr('rel')).show();
});
</script>

ممنون از کمکت
e107365
شنبه 15 بهمن 1390, 21:13 عصر
های بوی. ساری.
خب اون خرده مرده ها رو هم افزودم:

<!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" dir="ltr" lang="fa">
<head>
<title>{$title}</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
.figure {display:none}
.selected {display:block}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.ca-menu li a').click(function() {
$('.selected').hide();
$('#'+$(this).attr('rel')).animate({opacity: 'show'}, 'slow').addClass('selected');
});
});
</script>
</head>
<body>
<div class="mobo_menu">
<ul class="ca-menu">
<li>
<a href="#about-me-" rel="about-me-" >
<span class="ca-icon">A</span>
<div id="menu_skills" class="ca-content">
<h2 class="ca-main">About me</h2>
<h3 class="ca-sub">history of life</h3>
</div>
</a>
</li>
<li>
<a href="#article-" rel="article-">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main">Article</h2>
<h3 class="ca-sub">In different topic</h3>
</div>
</a>
</li>
</ul>
</div>

<div class="mobo_content">
<div id="about-me-" class="figure selected" >
<h3>About me</h3>
<div class="intro">About Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
</div>
</div>

<div id="article-" class="figure" >
<h3>Article</h3>
<div class="intro">Article Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris semper pharetra vitae a urna. Dolor sit amet sem.
</div>
</div>
</div>
</body>
</html>

گود لاک.
mmojbo
یک شنبه 16 بهمن 1390, 10:51 صبح
ممنونم از زحمتی که کشیدی
لطف کردی

اگه اشکالی نداره یه سوال دیگه هم داشتم ازت
div یه ارتفاعی داره دیگه، اگه متن موجود توی div بیشتر ازش باشه میزنه بیرون
برای اینکه تو همون ارتفاع div متن جابشه و اسکرول بخوره چه کار کنم؟

از کمکم بازم ممنون
e107365
یک شنبه 16 بهمن 1390, 11:11 صبح
این کد رو به css اضافه کن.
.figure {overflow: auto}
یادت نره اول یه ارتفاع ثابت به دیو بدی.
mmojbo
یک شنبه 16 بهمن 1390, 12:23 عصر
خیلی ممنونم
یه سوال دیگه هم دارم
هر وقت از دستم عصبانی شدی بگو !:قلب:

برای اینکه بخوام اسکرول یه شکلی داشته باشه و اینجوری بیریخت نباشه چه کار کنم

بازم ....................
e107365
یک شنبه 16 بهمن 1390, 15:23 عصر
اگه منظورت اینه که فقط اسکرال بالا به پایین باشه:
.figure{overflow-y:auto;overflow-x:hidden}
ولی این کد تو اپرا کار نمیکنه و همون اسکرول راست به چپ دوباره تو اپرا ظاهر میشه.
اگه می خوای کلا شکلش رو عوض کنی، این رو گوگل کن: jScroll Pane
mmojbo
یک شنبه 16 بهمن 1390, 16:40 عصر
از اینکه اینقدر مزاحمت شدم عذر می خوام
و ممنونم به خاطر همه کمک هات
موفق باشی