关于JQUERY中的hide()和show()

Posted 2023-05-09

因为对JQ和JS不熟悉，所以不知道如何实现渐隐或一个过渡的效果。我做的是隐藏显示DIV标签的代码。
<script>
jQuery(function ()
jQuery('#ullist li').hover(
function () jQuery('.d1', this).hide();jQuery('.d2', this).show(); ,
function () jQuery('.d2', this).hide(); jQuery('.d1', this).show();
)

jQuery('#ullist li').hover(
function () jQuery('.d1', this).hide(); jQuery('.d2', this).show(); ,
function () jQuery('.d2', this).hide(); jQuery('.d1', this).show();
)
);
</script>
<ul id="ullist">
<li>
<div class="d1">D1DIV里的内容</div>

<div class="d2">D2DIV里的内容</div>
</li>
</ul>

不是鼠标移动到D1上去后，显示D2，隐藏D1，然后从D2上移开鼠标隐藏D2显示D1。
现在就想做个渐隐的效果，请问如何能够做到？先谢谢了！~

关于JQUERY中的hide()和show()说明如下：

1、jquery中show()是显示出隐藏的元素。

比如有如下代码：

$(".btn2").click(function()
 $("p").show();
);

点击按钮2的时候，文字就显示出来了。

2、jquery中hide()是隐藏当前显示的元素。

$(".btn1").click(function()

  $("p").hide();

  );

点击按钮1的时候，文字就隐藏了。

参考技术A 把show换成fadeOut，hide换成fadeIn就行了追问

感谢你的回答，但按照您说的，不行，我是把两个叠在一起的，按您的方法之后，上面渐隐下面又渐隐了一遍，- -。

追答

把它们都放到一个div里面，只需要隐藏这一个div不行吗？

像这样

<div id="被隐藏的div">
     <div class="d1">D1DIV里的内容</div>
    <div class="d2">D2DIV里的内容</div>
</div>

只需要隐藏id为”被隐藏的div“就行了

追问

因为是正反面的两个内容，放一个DIV里不好控制了。

追答

没明白你的意思！

追问

就是在里的D1和D2，D1是正面内容，D2是反面内容，两个面叠在一起然后鼠标移动D1上面去D1隐藏，D2出现，然后移开D2隐藏，D1出现，只是想在这种切换上有个效果。这样说您明白了么？

本回答被提问者和网友采纳 参考技术B 在hide()和show()方法里面传一个数 比如hide(1000)实现渐隐 参考技术C

.show() 和 .hide() 如何在 jquery 中工作 [重复]

【中文标题】.show() 和 .hide() 如何在 jquery 中工作 [重复]

【英文标题】：How .show() and .hide() work in jquery [duplicate]

【发布时间】：2016-03-10 08:48:14

【问题描述】：

我目前正在注册，我根据注册过程中的位置隐藏和显示不同的输入。目前，我有 4 个输入，我想从隐藏其中的两个开始。我知道在 jquery 中你可以用 .hide() 来做到这一点。但是，当我加载页面时，两个输入出现然后消失。 .show() 和 .hide() 对元素有什么作用？它会改变显示吗？我怎样才能做到这一点，以便在页面加载时元素开始隐藏，然后我可以在需要时调用 .show() ？

我现在拥有的代码如下。我想要的是我不必在 ready 函数中调用.hide() 并且元素开始隐藏。

$(document).ready(function ()

//loads elements then hides them
  $("#input3").hide();
  $("#input4").hide();

//some time later when triggers are set and I want to show the inputs
  $("#input3").show();
  $("#input4").show();

我想要什么：

$(document).ready(function ()

//inputs 3 and 4 are already hidden

//some time later when triggers are set and I want to show the inputs
  $("#input3").show();
  $("#input4").show();

【参考方案1】：

您需要使用 css 隐藏输入字段。

<input type="text" name="input_name" id="input_id" />
#input_id
display:none;

当你需要显示这个输入框时，调用一个js函数就好了

$('#input_id').show()

【参考方案2】：

创建一个像这样的 CSS。

.hide

display : none

并为最初要隐藏的 div 使用 hide 类。

【参考方案3】：

在您的 html 元素中添加无显示

<input type="text" id="input1" style="display: none" />

或使用 css

#input1, #input2 
  display: none;

【讨论】：

搞定了，.show 和 .hide 只是改变显示吗？

是的，它是正确的！请参阅link 了解更多信息

【参考方案4】：

您可以将它们的初始样式display 设置为none。最好避免使用内联样式。

CSS

#input3, #input4 
  display: none;

在您的情况下，您的 jQuery 正在处理此问题。在执行之前，您的 HTML 会被解析，因此您可以看到 inputs，直到您的 JavaScript 被执行。

希望对你有帮助！