logo标签列表

使用jQuery实现点击时淡入淡出的div效果

javascriptjqueryhtmlcss
4
我在页面左右两侧有一个
。目前右侧的
被隐藏了。
我正在尝试使用jQuery来淡出当前显示的
，并通过淡入隐藏的
来替换它。
我做错了什么？我按照这个similar question的示例进行操作。
当您单击代码片段中的About链接时，应该发生这种情况。 

$("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。

非常感谢！

你的链接只指向了 JSFiddle 的主页。 - Difster
@Difster 试试这个 - https://codepen.io/anon/pen/weXgWm - Jordan Miguel
2个回答
2
你的代码有一些问题。
首先，你的`feed-show` div在`feed` div内部。因此，如果你`fadeOut()`你的`feed` div，里面的所有内容都会被隐藏。
其次，在你的CSS中，你为`feed-show`设置了绝对位置和top和left属性，因此即使你`fadeIn()`该元素，你也看不到它。
我对你的代码进行了一些更改，这样你就可以看到一个div淡出，另一个div淡入。
干杯！ 

$("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 {
  display: none;
  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>
</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>

@j 这个工作正常，但是...在淡入和淡出方面似乎存在问题，在将其移动到左边之前，它会在右侧显示隐藏的div一瞬间。这样看起来不太好。 - Jordan Miguel
是的，但那是CSS/HTML问题...你应该修改你的CSS代码，使其保持在右侧。起初，它显示在右侧，因为你有另一个div占据了左侧的空间。但当左侧的div消失时，右侧的div就会占据那个空间。 - JV Lobo
2

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

我将position:absolute更改为使用display:none来隐藏#feed-show

我更改了点击函数中的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>

使用第一个参数，例如：$('#element').fadeOut(1000,function(){//淡出完成后要执行的代码}); - MTK
我已经编辑并在其中加入了时间（请再次尝试片段）。 - MTK
仅有代码的答案并不是很有用。你没有解释你做了什么，它如何修复问题等等。尝试添加注释到你的代码中以澄清你所做的事情。 - random_user_name
我已经在CSS中添加了#feed-show{display:none}，以避免首次进入时出现丑陋的闪烁。 - MTK
@cale_b。我现在添加了一些解释。由于我的英语不好，我避免写得太多。 - MTK
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接