Question

我制作了一个扩展菜单，它将成为我的导航菜单。当您运行它时，文本将在未展开时显示。这是我不想要的，我希望它隐藏，直到菜单扩展。我曾尝试使用overflow: hidden;但它不起作用。 JSFidlle

HTML

<div id="div1">Home</div><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

CSS

#div1{
    position: fixed;
    width: 0;
    height: 0;
    border-bottom: 50px solid black;
    border-right: 50px solid transparent;
    float: left;
    color: white;
    font-size: 20px;
    vertical-align: middle;
    line-height: 50px;
}

JQUERY

$(document).ready(function() {

      $("#div1").hover(
        function() {
          $(this).animate({
            width: '+=800'
            }, 'slow'
          );
        },
        function() {
          $(this).animate({
            width: '-=800px'
            }, 'slow'
          );
        }
      );

    });

Answer 1

您应该将文本包装在一个范围中，以便您可以单独为其设置动画。 Fiddle

HTML：

<div id="div1"><span>Home</span></div><br />

css：

#div1{
    position: fixed;
    width: 0;
    height: 0;
    border-bottom: 50px solid black;
    border-right: 50px solid transparent;
    float: left;
    color: white;
    font-size: 20px;
    vertical-align: middle;
    line-height: 50px;
}

JS：

$(document).ready(function() {
    $("#div1 span").hide();

    $("#div1").hover(
        function() {
          $(this).animate({
            width: '+=800'
            }, 'slow'
          );

          $("span", this).show('slow');
        },
        function() {
          $(this).animate({
            width: '-=800px'
            }, 'slow'
          );

          $("span", this).hide('slow');
        }
    );
});

Answer 2

试试这个（working jsfiddle）：

$(document).ready(function() {
  $("#div1").hover(
    function() {
      $(this).addClass('show-text');
      $(this).animate({
        width: '+=800'
      }, 'slow');
    },
    function() {
      $(this).removeClass('show-text');
      $(this).animate({
        width: '-=800px'
      }, 'slow');
    }
  );
});

#div1 {
  position: fixed;
  width: 0;
  height: 0;
  border-bottom: 50px solid black;
  border-right: 50px solid transparent;
  float: left;
  color: white;
  font-size: 20px;
  vertical-align: middle;
  line-height: 50px;
  text-indent: -9999px;
}
#div1.show-text {
  text-indent: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Home</div>

Answer 3

您可以使用color: transparent;来解决问题，然后每次div1悬停时，您都会为expanded元素切换一个类div1 color: #fff;。它看起来不错，效果很好。

Here is the jsfiddle example

HTML：

<div id="div1">Home</div><br />

CSS：

#div1 {
  position: fixed;
  width: 0;
  height: 0;
  border-bottom: 50px solid black;
  border-right: 50px solid transparent;
  float: left;
  color: transparent;
  font-size: 20px;
  vertical-align: middle;
  line-height: 50px;
}

#div1.expanded {
  color: #fff;
}

JS：

$(document).ready(function() {

  $("#div1").hover(
    function () {
      $(this).animate({ width: '+=800' }, 'slow').toggleClass("expanded");
    },
    function () {
      $(this).animate({ width: '-=800px' }, 'slow').toggleClass("expanded");
    }
  );

});

干杯。

扩展菜单在扩展前显示文本

3 个答案: