javascript - jquery fade toggle div over another div when click? - Stack Overflow

admin管理员组

文章数量:1418342

This is my test page and I want when the page is loaded everything is hidden. When I click on "About" text is fade in using fadeToggle(); but when I click on "My work" another text is fade in but under the previous one. I want fade it over the previous one. Can u help me?

My code:

<script>
$(document).ready(function(){
    $(".thumbnail").hide();
    $(".work").click(function(){
        $(".thumbnail").fadeToggle('slow');      
    });
});


$(document).ready(function(){
    $(".person").hide();
    $(".about").click(function(){
        $(".person").fadeToggle('slow');      
    });
});
</script>

This is my test page and I want when the page is loaded everything is hidden. When I click on "About" text is fade in using fadeToggle(); but when I click on "My work" another text is fade in but under the previous one. I want fade it over the previous one. Can u help me?

My code:

<script>
$(document).ready(function(){
    $(".thumbnail").hide();
    $(".work").click(function(){
        $(".thumbnail").fadeToggle('slow');      
    });
});


$(document).ready(function(){
    $(".person").hide();
    $(".about").click(function(){
        $(".person").fadeToggle('slow');      
    });
});
</script>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 30, 2015 at 13:50 smyslov 1,27511 gold badge88 silver badges3030 bronze badges asked Jul 30, 2015 at 13:20 user1994521user1994521 8711 silver badge88 bronze badges 2

• Could you also post the relevant html in the code snippet? – John Bupit Commented Jul 30, 2015 at 13:21
• There's nothing wrong here. What John Bupit said. We need to see Html part. And you don't have to insert another $(document).ready() for the second time. – Altay Mazlum Commented Jul 30, 2015 at 13:25

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Try this.

$(document).ready(function(){
    $(".thumbnail").hide();
    $(".person").hide();

    $(".work").click(function(){
        $(".person").hide();
        $(".thumbnail").fadeToggle('slow');      
    });


    $(".about").click(function(){
        $(".thumbnail").hide();
        $(".person").fadeToggle('slow');      
    });
});

Updated based on Matthew's ment Demo here

This is a mon problem:

multiple items to display but one of them showing at a time

simple solution is:

• hide all elements
• show what you want to see

in this way, you cover all possible solutions, even display nothing, where you skip second phase

in your case:

function hideAll(){
 $(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}

$(document).ready(function(){
    $(".work").click(function(){
        hideAll();
        $(".thumbnail").fadeToggle('slow');      
    });
    $(".about").click(function(){
        hideAll();
        $(".person").fadeToggle('slow');      
    });

hideAll();
});

This is something very easy to plete, its best to use the same click event names with the divs you want to open so it can be modular.

There are some slight amendments to your HTML as well as a big change in the JS but it will work with as many sections as you like now without having to continuously add new click() functions.

$(document).ready(function() {
  $('section').hide();
  $(".btn").click(function() {
    $('section').fadeOut('1000');
    $('section#'+$(this).attr('id')).delay('1000').fadeIn();
  });
});

/* CSS Document 
html {
    background: url(green.jpg) no-repeat center center fixed;
    background-size: cover;
} 
 */

body {
  font-family: 'Candara', 'Open Sans', 'sans-serif';
}
/* css for the shiny buttons */

.btn {
  cursor: pointer;
  margin: 10px;
  text-decoration: none;
  padding: 10px;
  font-size: 14px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
}
.btn:hover {
  cursor: url(http://cur.cursors-4u/symbols/sym-1/sym46.cur), auto;
}
.contact {
  color: #000;
}
.contact:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.about {
  color: #000;
}
.about:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.work {
  color: #000;
}
.work:hover {
  background-color: #ecf0f1;
  color: #000;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
}
.buttons {
  padding-top: 30px;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 100px;
}
.title,
.subtitle {
  font-family: 'Wire one';
  font-weight: normal;
  font-size: 5em;
  margin-bottom: 15px;
  text-align: center;
}
.subtitle {
  line-height: .9em;
  font-size: 5.5em;
  margin-top: 0;
  margin-bottom: 40px;
}
.tagline {
  font-size: 1.4em;
  line-height: 1.3em;
  font-weight: normal;
  text-align: center;
}
.thumbnail {
  background-color: rgba(255, 255, 255, .2);
  border: 0 none;
  padding: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.thumbnail .caption {
  color: inherit;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <a class="btn" id="about">About</a>
  <a class="btn" id="work">My Work</a>
  <a class="btn" id="contact">Contact</a>
</div>




<!-- Main (Home) section -->
<section class="section" id="about">
  <div class="container">
    <div class="person" style="display: block;">
      <div class="row">
        <div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center">

          <!-- Site Title, your name, HELLO msg, etc. -->
          <h1 class="title">Wele!</h1>
          <h2 class="subtitle">My name is Daniel Adamek</h2>

          <!-- Short introductory (optional) -->
          <h3 class="tagline">
					I am 23 years old IT enthusiast located in Zlin, Czech Republic.<br>
					Currently, I am looking for any kind of job in IT field.<br>
          Please, check out my work and feel free to contact me :)
				</h3>

          <!-- Nice place to describe your site in a sentence or two -->

        </div>
      </div>
      <!-- /col -->
    </div>
    <!-- /row -->

  </div>
</section>


<!-- Third (Works) section -->
<section class="section" id="work">
  <div class="container">
    <div class="thumbnail" style="display: block;">
      <h2 class="text-center title">More Themes</h2>
      <p class="lead text-center">
        Huge thank you to all people who publish
        <br>their photos at <a href="http://unsplash.">Unsplash</a>, thank you guys!
      </p>
    </div>
    <div class="row">
      <div class="col-sm-4 col-sm-offset-2">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-sm-offset-2">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail" style="display: block;">
          <img src="" alt="">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>

---

If you do want to keep your HTML the exact same, try this out

$(document).ready(function(){
    $(".thumbnail").hide();
    $(".person").hide();
    $(".work").click(function(){
        $(".person").fadeOut('500');
        $(".thumbnail").delay('500').fadeIn('slow');      
    });
    $(".about").click(function(){
        $(".thumbnail").fadeOut('500');
        $(".person").delay('500').fadeIn('slow');      
    });
});

function hideAll()
{
    $(".hideable").hide();
}

$(document).ready(function(){
    hideAll();  // great idea. First hide all then show the correct one.
    $(".button").click(function(){
        hideAll();
        if ($(this).hasClass("work"))
        {
          $(".thumbnail").fadeToggle('slow');
        }
        else if ($(this).hasClass("about"))
        {
           $(".person").fadeToggle('slow');
        }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail hideable">thumbnail</div>
<div class="person hideable">person</div>

<button class="work button">Work</button>
<button class="about button">About</button> 

This example should you give you a start. It attaches a click event to the buttons using the .button class selector. Then it checks if the button has another class and performs the appropiate action.

Your question is not reliant upon jQuery - it is reliant upon CSS and styling those two texts on top of each other. Then you can fade in/out.

What I would suggest trying is wrapping both text inside one div and working with position properties.

ie

HTML

<div class="wrapper">
    <div class="thubmnail">Some Thumbnail</div>
    <div class="person">Some Person</div>
</div>

CSS

.wrapper {
    position: relative;
}

.wrapper div {
    position: absolute; //This will position both divs one on top of the other
}

本文标签： javascriptjquery fade toggle div over another div when clickStack Overflow