0

我的 Jquery 不适用于我选择<p>and<img>元素的方式。我怎样才能让它工作？

function projectanim(x)
{
    var Para = x.getElementsByTagName("p"); 
    var Imgs = x.getElementsByTagName("img"); 
    if ($(x).height() != 200)
    {
        $(x).animate({height:'200px'});
        $(Para[0]).animate({display:'inline'});
        $(Imgs[0]).animate({display:'inline'});
    }
    else
    {
        $(x).animate({height:'25px'});
        $(Para[0]).animate({display:'none'});
        $(Imgs[0]).animate({display:'none'});
    }
}
4

4 回答 4

1

如果没有 HTML，这只是在黑暗中拍摄，但我假设您正在尝试获取特定 div 中的段落和图像？

尝试这个：

var Para = x.find("p"); 
var Imgs = x.find("img");

虽然取决于你实际传递的内容，因为 x 将确定它是否真的有效......

于 2013-08-08T01:19:53.533 回答
0

“我想做的是淡化

并从无内联。”你只是想要

并淡入？还是您希望它从 display:none 变为 inline 并淡入？

我将向您展示如何做到这两点，如果您只想要淡入功能，您可以删除部分内容。

首先将 p 和 img 设置为 display:none; 和不透明度：0，在css中像这样

p, img
{
   display:none;
   opacity:0;
}

其次，您的 js 必须更改两者的显示

, 和标签和淡入/淡出像这样。

function projectanim(x)
{ 
    if ($(x).height() != 200)
    {
        $(x).animate({height:'200px'});
        document.getElementsByTagName("p").style.display = 'inline';
        document.getElementsByTagName("img").style.display = 'inline';
        $("p").animate({"opacity": "1"}, 1000);
        $("img").animate({"opacity": "1"}, 1000);


    }
    else
    {
        $(x).animate({height:'25px'});
        $("p").animate({"opacity": "0"}, 500);
        $("img").animate({"opacity": "0"}, 500);
        document.getElementsByTagName("p").style.display = 'none';
        document.getElementsByTagName("img").style.display = 'none';
    }
}
于 2013-08-08T02:31:00.800 回答
0 
function projectanim (projectId) {
  $('p, img', $('div#' + projectId)) // Select p/img tags children of <div id="projectId">
    .slideDown();                 // show using slideDown, fadeIn() or show('slow')
}

// Example
projectanim ('protflolio_project');

jQuery的想法是：

  1. 使用正确的选择器
  2. 用正确的方法

例子

在which下选择所有img和p标签的不同方法是：dividmy_div

// The easy way
p_and_img = $('#my_div p, #my_div img');

// Using the context parameter
p_and_img = $('p, img', $('#my_div'));

// Using the context parameter and making sure my_div is a div
p_and_img = $('p, img', $('div#my_div'));

// only the first p and img
p_and_img = $('p:eq(0), img:eq(0)', $('#my_div'));
于 2013-08-08T01:23:33.623 回答
0

您的问题确实非常模糊，但是据我所知，这就是您要实现的目标：

function projectanim(x) {
    var self = $(x);
    if (self.height() === 200) {
        self.animate({ height : '25px' })
            .find('p,img').fadeOut()
            ;
    } else {
        self.animate({ height : '200px' })
            .find('p,img').fadeIn()
            ;
    }
}

话虽如此，除非浏览器兼容性和所有这些杂乱无章，否则您确实应该使用 CSS 而不是 Javascript 来做类似的事情。

根据您的父元素（例如 a <div>），您可以编写如下 CSS：

div {
    height : 200px;
    transition : height .5s linear;
}
div.active {
    height : 25px;
}
div img,
div p {
    display : inline;
    opacity : 100;
    transition : opacity .5s linear;
}
div.active img,
div.active p {
    opacity : 0;
}

只需使用您的 Javascript 打开/关闭一个类：

function projectanim(x) {
    $(x).toggleClass('active');
}

一切都应该是自动的。您的 Javascript 变得更简单、耦合更少、更易于维护，并且您的样式在它们应有的位置（在 CSS 文件中）。

于 2013-08-08T01:31:47.113 回答