实施例

Question

我的Jquery没有按照我选择<p>和<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'});
    }
}

Answer 1

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

试试这个：

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

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

Answer 2

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的想法是：

使用正确的选择器
使用正确的方法

实施例

选择img p为div id下的所有my_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'));代码的不同方式：

{{1}}

Answer 3

你的问题确实非常模糊，但从我能收集的内容来看，这就是你所期待的目标：

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()
            ;
    }
}

尽管如此，除了浏览器兼容性和所有这些shizz之外，你真的应该使用CSS而不是Javascript来做这样的事情。

根据您的父元素（例如，<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文件中）。

Answer 4

“我正在尝试做的是淡化

并从无内联。” 你只想要

并且淡入？或者你希望它从display：none到inline和淡入？

我会告诉你如何做到这两点，如果你只是想要淡入功能，你可以带走部分。

首先设置p，img as 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';
    }
}

如何使用Jquery在div中选择一个元素

4 个答案:

实施例