مسج - DIV يتلاشى المتاعب

StackOverflow https://stackoverflow.com/questions/1516904

  •  19-09-2019
  •  | 
  •  

سؤال

لدي DIV، الذي يحتوي على معرف "محتوى". انها واضحة. 

<div id="wrapper" style="display:block">
  <div id="content">
    Some text
  </div>
</div>

الآن أريد أن تتلاشى:

$('#wrapper').fadeIn( 1500 );
$('#content').click(function(){
   $(this).fadeOut( 1500 );
});

ولا يحدث شيء. ولكن عندما كتبت:

$('#content').fadeIn( 1500 );

يختبئ ثم يظهر مرة أخرى.

هنا CSS.

#content
{
    height: 100%;
    width: 100%;
}

المتصفح: Firefox 3.5.3 تحت Linux Gentoo

محدث

عندما أكتب التعليمات البرمجية:

$('#content').hide();

يخفي بشكل صحيح.

محدث

لقد حل مشكلة ... لا أستطيع أن أفهم، لماذا لم أكن ... فقط استبدال jquery.min مع مسج

هل كانت مفيدة؟

المحلول

إذا فهمت سؤالك، لديك مشكلتان: لا يتلاشى المحتوى، وعند النقر فوقه، لا يتلاشى المحتوى.

ربما تكون كلا المشكلين ناجما عن تنفيذ البرنامج النصي الخاص بك قبل ظهور المجمع والمحتوى Divs في المستند. إذا كان لديك <script> العلامة في <head> من وثيقتك، ثم $('#wrapper') لن تجد أي شيء يتلاشى و $('#content') لن تجد أي شيء لإرفاق معالج نقرة.

ربما يكون أفضل حل لإرجاء أي شيء حتى يتم تحميل المستند، باستخدام ready:

$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
    $(this).fadeOut(1500);
  });
});

بدلا من ذلك يمكن أن تضع الخاص بك <script> بطاقة شعار بعد ال <div> العلامات في الجسم.

عند إصلاح هذه المشكلة، سوف يتلاشى المحتوى، لكنه لن يكون سلسا لأن المجمع Div مرئي في البداية - لديك style="display:block" على التفاف div. تحتاج إلى جعل ذلك display: none; بدلا من ذلك، يتم إخفاء المجمع Div أثناء تحميل الصفحة.

فيما يلي ملف كامل يعمل:

<html>
<head>
<style type="text/css">
#wrapper
{
    display: none;
}

#content
{
    height: 100%;
    width: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  window.alert("Couldn't load jQuery");
</script>
<script>
$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
     $(this).fadeOut(1500);
  });
});
</script>
</head>
<body>
<div id="wrapper">
  <div id="content">
    Some text
  </div>
</div>
</body>
</html>

نصائح أخرى

يعمل بالنسبة لي، فايرفوكس على OSX. تأكد من أن معرفك فريد من نوعه، إذا كان لديك نسخة مكررة قد لا تعمل بشكل صحيح. أيضا، طريقتك: كتلة زائدة عن الحاجة، divs هي كتل افتراضيا.

لقد كتبت $ ("# المحتوى") في Fadeout و $ ('# COONENT') في Fadein. البعض من أن هذه الآثار تسمى بالضبط بنفس الطريقة ولا تقدم أي تفسير لأنها لن يعمل كلاهما كما هو متوقع.

أنت أيضا تترك # في "#Wrapper" (خط 1 من jquery).

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top