用jQuery淡入和淡出div onclick

时间：2017-07-05 00:35:16

标签： javascript jquery html css

我在页面左侧和右侧有一个div。目前，右侧的div为hidden。

我正在尝试使用jQuery淡出当前显示的div，并通过淡入hidden div来替换它。

我做错了什么？我按照similar question上的示例进行了示例 当您单击代码段中的关于链接时，应该会发生这种情况：

$("a").on('click', function() {
  $("#feed-show").fadeIn();
  $(".feed").fadeOut();
});
a {
  color: rgba(255, 80, 70, 1) !important;
  text-decoration: none;
}

.nav a {
  font-size: 13px;
  color: rgba(255, 80, 70, 1);
  text-decoration: none;
  font-weight: bold;
}


/* Content ---------------------*/

/* nav */
.nav {
  position: fixed;
  float: left;
  width: 96%;
  left: 2%;
  margin-left: -2px;
  border-bottom: 2px solid rgba(255, 80, 70, 1);
  padding-bottom: 18px;
  background: white;
  z-index: 999;
  top: 0px;
  padding-top: 18px;
}

.c1 {
  max-width: 24%;
}

.column {
  position: relative;
  float: left;
  padding-right: 1%;
  width: 585px;
}

/* feed */
.feed {
  width: 96%;
  left: 2%;
  margin-top: 75px;
  padding-left: 2px;
}

.c2 {
  max-width: 49%;
}

.feed-item {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 25px;
  padding-top: 2.5%;
}

.feed-show {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav">
  <div class="column c1">
    <a href="#" rel="click">About</a>
  </div>
</div>

<div id="feed" class="feed" style="margin-top: 54px;">
  <div class="column c2">
    <p>
      Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
      within the various ethnic minorities within the UK.
    </p>
    <p>
      <a href="#">Find out more about Creatives of Colour..</a>
    </p>
  </div>

  <!-- Show on click -->

  <div id="feed-show" class="feed-show" style="margin-top: 54px;">
    <div class="column c2">
      <p>
        Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
      </p>
      <p>
        <a href="#">Find out more about Creatives of Colour..</a>
      </p>
    </div>
  </div>

这是codepen

非常感谢！

2 个答案:

答案 0 :(得分：2)

您的代码存在一些问题。

首先，您的feed-show div位于feed div中。因此，如果您fadeOut()使用feed div，则内部的所有内容都将被隐藏。

第二，在您的CSS中，您为feed-show设置了绝对位置和左上角和左侧属性，因此，即使您fadeIn()该元素，您也无法看到它

我对您的代码进行了一些更改，因此您可以看到一个div如何淡出而另一个淡出。

干杯！

＆＃13;
＆＃13; 
$("a").on('click', function() {
   $("#feed-show").fadeIn();
   $(".feed").fadeOut();
});
＆＃13; 
a {
  color: rgba(255,80,70,1) !important ;
  text-decoration: none;
}

.nav a {
  font-size: 13px;
  color: rgba(255,80,70,1);
  text-decoration: none;
  font-weight: bold;
}


/* Content ---------------------*/

/* nav */
.nav {
  position: fixed;
  float:left;
  width: 96%;
  left: 2%;
  margin-left: -2px;
  border-bottom: 2px solid rgba(255,80,70,1);
  padding-bottom: 18px;
  background: white;
  z-index: 999;
  top: 0px;
  padding-top: 18px;
}

.c1 {
  max-width: 24%;
}

.column {
  position: relative;
  float:left;
  padding-right: 1%;
  width: 585px;
}

/* feed */
.feed {
  width: 96%;
  left: 2%;
  margin-top: 75px;
  padding-left: 2px;
}

.c2 {
  max-width: 49%;
}

.feed-item {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 25px;
  padding-top:2.5%;
}

.feed-show {
  display: none;
  background:red;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav">
  <div class="column c1">
    <a href="#" rel="click">About</a>
  </div>
</div>

<div id="feed" class="feed" style="margin-top: 54px;">
  <div class="column c2">
    <p>
      Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
      within the various ethnic minorities within the UK.
    </p>
    <p>
      <a href="#">Find out more about Creatives of Colour..</a>
    </p>
  </div>
</div>

<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
  <div class="column c2">
    <p>
      Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
    </p>
    <p>
      <a href="#">Find out more about Creatives of Colour..</a>
    </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

我已对您的代码进行了一些修改：

我改变了位置：绝对保持隐藏#feed-show with display：none

我已经更改了内部点击功能fadeIn以在fadeOut完成时执行以避免奇怪的移动效果

$(document).ready(function(){
  $("#feed-show").fadeOut(0);
  $("a").on('click', function() {
  
     $(".feed").fadeOut(1000,function(){
        $("#feed-show").fadeIn(1000);
     });
  });
});
    a {
    color: rgba(255,80,70,1) !important ;
    text-decoration: none;
}

.nav a {
    font-size: 13px;
    color: rgba(255,80,70,1);
    text-decoration: none;
    font-weight: bold;
}


/* Content ---------------------*/

/* nav */
.nav {
    position: fixed;
    float:left;
    width: 96%;
    left: 2%;
    margin-left: -2px;
    border-bottom: 2px solid rgba(255,80,70,1);
    padding-bottom: 18px;
    background: white;
    z-index: 999;
    top: 0px;
    padding-top: 18px;
}

.c1 {
    max-width: 24%;
}

.column {
    position: relative;
    float:left;
    padding-right: 1%;
    width: 585px;
}

/* feed */
.feed {
    width: 96%;
    left: 2%;
    margin-top: 75px;
    padding-left: 2px;
}

.c2 {
    max-width: 49%;
}

.feed-item {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 25px;
    padding-top:2.5%;
}
#feed-show{
  display:none;
}
#feed-show p{

   background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
            <div class="column c1">
                <a href="#" rel="click">About</a>
            </div>

        </div>
<div id="container">
        <div id="feed" class="feed" style="margin-top: 54px;">

            <div class="column c2">
                <p>
                    Creatives of Colour (C-oC) is an independent directory
                    that provides you with up to date information on
                    current, and future work of creatives of colour
                    being showcased in the UK. C-oC aims to contribute to the
                    necessary exaltation of talented artists within the various
                    ethnic minorities within the UK.
                </p>
                <p>
                    <a href="#">Find out more about Creatives of Colour..</a>
                </p>
            </div>
			</div>
    <!-- Show on click -->

    <div id="feed-show" class="feed-show" style="margin-top: 54px;">

            <div class="column c2">
                <p>
							OCULT TEXT
                    Creatives of Colour (C-oC) is an independent directory
                    that provides you with up to date information on
                    current, and future work of creatives of colour
                    being showcased in the UK.
                </p>
                <p>
                    <a href="#">Find out more about Creatives of Colour..</a>
                </p>
            </div>


        </div>
 </div>

相关问题
最新问题